Jquery Slider Issues with right and left slide
Question
Hi I am having issues creating my jquery slider. I am trying to use animate to slide the image to the right and left. I am unable to figure out what the issue is. What am I doing wrong to get the images to slide left and right? Thanks!
I added a code snippet but it appears lorempixel.com images do not show up on here.
'use strict'; $(document).ready(function() { var total = 11; for (var i = 1; i < total; i++) { $('#slideshow .pics').append('<img src="http://lorempixel.com/500/300/food/' + i + '" />'); $('#slideshow .pics').append('<b>Slide ' + i + '</b>.'); //add text to slide $('.circle').append('<i class="fa fa-circle"></i>'); } function slideAnimationLeft(targetLeft) { var Pictures = $('.pics'); return function() { Pictures.children('div:first').animate({ 'left': targetLeft + 'px' }, 1000, function() { Pictures.children('div:first').appendTo(Pictures).css('marginTop', '0px').fadeIn(2000); }); }; }; /* function slideAnimationRight(targetRight) { return function() { $('.pics img:nth-child').animate({ 'right': targeRight + 'px'}, 1000); }; };*/ $('.left').click(slideAnimationLeft(-300)); $('.right').click(slideAnimationRight(300)); });
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ /* line 6, ../sass/_reset.scss */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ /* line 27, ../sass/_reset.scss */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } /* line 31, ../sass/_reset.scss */ body { line-height: 1; } /* line 34, ../sass/_reset.scss */ ol, ul { list-style: none; } /* line 37, ../sass/_reset.scss */ blockquote, q { quotes: none; } /* line 40, ../sass/_reset.scss */ blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* line 45, ../sass/_reset.scss */ table { border-collapse: collapse; border-spacing: 0; } /* line 50, ../sass/_reset.scss */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* line 6, ../sass/styles.scss */ #slideshow { width: 500px; height: 300px; margin: 0 auto; overflow: hidden; margin-top: 10%; } /* line 13, ../sass/styles.scss */ #slideshow > img { position: absolute; display: block; } /* line 18, ../sass/styles.scss */ #slideshow .pics { z-index: 1; } /* line 22, ../sass/styles.scss */ #slideshow .control { z-index: 2; } /* line 26, ../sass/styles.scss */ #slideshow > div { width: 500px; height: 300px; overflow: hidden; position: absolute; } /* line 34, ../sass/styles.scss */ .circle { text-align: center; } /* line 40, ../sass/styles.scss */ i.fa-circle { opacity: 0.7; margin-top: 20%; padding: 2px; } /* line 48, ../sass/styles.scss */ i.fa-angle-left { margin-top: 20%; opacity: 0.7; z-index: 100; } /* line 56, ../sass/styles.scss */ i.fa-angle-right { margin-top: 20%; margin-left: 87.75%; opacity: 0.7; z-index: 100; }
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Assignment 2</title> <link rel="stylesheet" href="stylesheets/styles.css"> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> </head> <body> <div id="slideshow"> <div class="control"> <a href="#" class="left"><i class="fa fa-angle-left fa-5x left"></i></a> <a href="#" class="right"><i class="fa fa-angle-right fa-5x right"></i></a> <div class="circle"> </div> </div> <div class="pics"> </div> </div> <script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script> <script type="text/javascript" src="bower_components/jquery-ui/jquery-ui.js"></script> <script type="text/javascript" src="main.js"></script> </body> </html>
1 answers
solution1
1 ACCPTED 2015-10-03 20:53:50
Heres a working live example: http://jsfiddle.net/hxwfodd3/
Those are the main things I did to solve the problems you had with your code:
$('.left').click(slideAnimationLeft(-300));
This causes to run slideAnimationLeft(-300) as soon as the page loads, which is not that you want in this case.
You need to add a function() in order for it to work if the user clicks .
$('.left').click(function() { slideAnimationLeft(-300) } );
Secondly, because you have two div.left , the function runs twice. This will solve it
$('.left >').click(function() { slideAnimationLeft(-300) } );
I saw that you tried to "find" the div of the first picture here: Pictures.children('div:first').animate({ although the div wasn't created in the first place.
Changed your code to this:
$('#slideshow .pics').append('<div>');
$('#slideshow .pics div:last').append('<img src="http://lorempixel.com/500/300/food/' + i + '" />');
$('#slideshow .pics div:last').append('<b>Slide ' + i + '</b>.'); //add text to slide
$('#slideshow .pics').append('</div>');
The cool sliding effect didn't work because of the missing css code:
#slideshow .pics div {
position:relative;
}
Reset left after it appends. change this:
Pictures.children('div:first').appendTo(Pictures).css('marginTop', '0px').fadeIn(2000);
Into this:
Pictures.children('div:first').appendTo(Pictures).css('marginTop', '0px').css('left', '0px').fadeIn(2000);
Live example: http://jsfiddle.net/hxwfodd3/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.