stackoom
  简体   繁体   中英

Add functionality to jquery slider

 原文  2017-04-11 14:19:31  5   1    javascript/ jquery/ html5/ css3

Question

I got the following code: 

 $(document).ready(function(){ var $item_width = $('.item').width(); var $items_count = $('.item').length; var $vutreshen_container_shirina = $item_width * $items_count; $('.inner-box').css('width', $vutreshen_container_shirina); var previous_button = $(".previous"); var next_button = $(".next"); //Next function next() { $(next_button).on('click', function (event) { event.preventDefault(); var current_margin = $('.inner-box').css('margin-left').replace(/[^-\\d.]/g, ''); var inner_container_offset = 300; var parse_current = parseInt(current_margin); var totalAmount = parse_current + inner_container_offset; if(totalAmount >= 0) { $('.inner-box').css('margin-left', '-=' + inner_container_offset + 'px'); } }); }; //Next next(); function previous() { $(previous_button).on('click', function (event) { event.preventDefault(); var current_margin = $('.inner-box').css('margin-left').replace(/[^-\\d.]/g, ''); var inner_container_offset = 300; var parse_current = parseInt(current_margin); var totalAmount = parse_current + inner_container_offset; if (totalAmount <= 0) { $('.inner-box').css('margin-left', '+=' + inner_container_offset + 'px'); } }); }; //Prev previous(); }); 
 body{ text-align: center; } .outer-box{ overflow: hidden; display: inline-block; width: 300px; } img{ width: 100%; height: 100%; } .inner-box{ display: inline-block; } .item{ float: left; width: 300px; } .previous{ margin-right: 10px; } .next{ margin-left: 25px; } .previous, .next{ position: relative; left: 210px; top: 20px; margin-bottom: 50px; } 
 <!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="apple-touch-icon" href="apple-touch-icon.png"> <!-- Place favicon.ico in the root directory --> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> <script src="js/vendor/modernizr-2.8.3.min.js"></script> </head> <body> <button type="button" class="previous">Previous</button> <button type="button" class="next">Next</button> <div class="outer-box"> <div class="inner-box"> <div class="item1 item"> <div class="inner_item"> <img src="https://static.comicvine.com/uploads/original/14/146991/5041526-7374741911-grizzl.jpeg" alt="animal-gallery"> <h3>Giraffe</h3> <p>The Giraffe (giraffe) is a genus of African even-toed ungulate mammals. </p> </div> </div> <div class="item2 item"> <div class="inner_item"> <img src="http://kids.nationalgeographic.com/content/dam/kids/photos/animals/Mammals/QZ/sloth-beach-upside-down.jpg.adapt.945.1.jpg" alt="animal-gallery"> <h3>Sloth</h3> <p>Sloths are mammals classified in the families Megalonychidae (two-toed sloths). </p> </div> </div> <div class="item3 item"> <div class="inner_item"> <img src="http://animals.sandiegozoo.org/sites/default/files/2016-12/Wolf_ZN.jpg" alt="animal-gallery"> <h3>Wolf</h3> <p>The gray wolf or grey wolf (Canis lupus), also known as the timber wolf or wes.</p> </div> </div> <div class="item4 item"> <div class="inner_item"> <img src="http://animals.sandiegozoo.org/sites/default/files/2016-12/Wolf_ZN.jpg" alt="animal-gallery"> <h3>Wolf</h3> <p>The gray wolf or grey wolf (Canis lupus), also known as the timber wolf or wes.</p> </div> </div> <div class="item5 item"> <div class="inner_item"> <img src="http://animals.sandiegozoo.org/sites/default/files/2016-12/Wolf_ZN.jpg" alt="animal-gallery"> <h3>Wolf</h3> <p>The gray wolf or grey wolf (Canis lupus), also known as the timber wolf or wes.</p> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"> </script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-{{JQUERY_VERSION}}.min.js"><\\/script>')</script> <script src="js/plugins.js"></script> <script src="js/main.js"></script> <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. --> <script> (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]= function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date; e=o.createElement(i);r=o.getElementsByTagName(i)[0]; e.src='https://www.google-analytics.com/analytics.js'; r.parentNode.insertBefore(e,r)}(window,document,'script','ga')); ga('create','UA-XXXXX-X','auto');ga('send','pageview'); </script> </body> </html>

How can I add 2-3 more divs and keep sliding. At the moment I can swipe through first, second and third and if I add more it stops sliding. I am beginner and this was the easiest way I could achieve this.

1 answers

solution1
 0 ACCPTED  2017-04-11 14:40:59

I changed your JS some.

Perticularly using totalAmount to set the margin .

And evaluating it with the total amount of items

I also merged the click function into one, and checks event.target : 

 $(document).ready(function() { var $item_width = $('.item').width(); var $items_count = $('.item').length; var $vutreshen_container_shirina = $item_width * $items_count; $('.inner-box').css('width', $vutreshen_container_shirina); $(".next, .previous").on("click", change); function change(event) { event.preventDefault(); var current_margin = $('.inner-box').css('margin-left').replace(/[^-\\d.]/g, ''); var inner_container_offset = 300; var parse_current = parseInt(current_margin); if(event.target === $('.previous')[0]) { var totalAmount = parse_current + inner_container_offset; if (totalAmount <= 0) { $('.inner-box').css('margin-left', totalAmount + 'px'); } } else if (event.target === $('.next')[0]) { var totalAmount = parse_current - inner_container_offset; if(totalAmount >= -inner_container_offset * ($items_count - 1)) { $('.inner-box').css('margin-left', totalAmount + 'px'); } } } }); 
 body { text-align: center; } .outer-box { overflow: hidden; display: inline-block; width: 300px; } img { width: 100%; height: 100%; } .inner-box { display: inline-block; } .item { float: left; width: 300px; } .previous { margin-right: 10px; } .next { margin-left: 25px; } .previous, .next { position: relative; left: 210px; top: 20px; margin-bottom: 50px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button type="button" class="previous">Previous</button> <button type="button" class="next">Next</button> <div class="outer-box"> <div class="inner-box"> <div class="item1 item"> <div class="inner_item"> <img src="https://static.comicvine.com/uploads/original/14/146991/5041526-7374741911-grizzl.jpeg" alt="animal-gallery"> <h3>Giraffe</h3> <p>The Giraffe (giraffe) is a genus of African even-toed ungulate mammals. </p> </div> </div> <div class="item2 item"> <div class="inner_item"> <img src="http://kids.nationalgeographic.com/content/dam/kids/photos/animals/Mammals/QZ/sloth-beach-upside-down.jpg.adapt.945.1.jpg" alt="animal-gallery"> <h3>Sloth</h3> <p>Sloths are mammals classified in the families Megalonychidae (two-toed sloths). </p> </div> </div> <div class="item3 item"> <div class="inner_item"> <img src="http://animals.sandiegozoo.org/sites/default/files/2016-12/Wolf_ZN.jpg" alt="animal-gallery"> <h3>Wolf</h3> <p>The gray wolf or grey wolf (Canis lupus), also known as the timber wolf or wes.</p> </div> </div> <div class="item4 item"> <div class="inner_item"> <img src="http://animals.sandiegozoo.org/sites/default/files/2016-12/Wolf_ZN.jpg" alt="animal-gallery"> <h3>Bear</h3> <p>The gray wolf or grey wolf (Canis lupus), also known as the timber wolf or wes.</p> </div> </div> <div class="item5 item"> <div class="inner_item"> <img src="http://animals.sandiegozoo.org/sites/default/files/2016-12/Wolf_ZN.jpg" alt="animal-gallery"> <h3>Cat</h3> <p>The gray wolf or grey wolf (Canis lupus), also known as the timber wolf or wes.</p> </div> </div> </div> </div>

暂无
暂无

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.

Related Question How do I add Left/Right Arrow (Next/Previous) functionality to my jQuery image and text slider? jQuery Basic Slider - remove resize/responsive functionality Create a jQuery Slider with onclick slide functionality jQuery content slider with start/stop/resume functionality How to add onclick functionality for bootstrap slider? Add Text to jQuery slider Add looping to Jquery Slider Add autoscroll to jquery slider Add carousel functionality to tabs with jQuery Dynamically Add Images to Slider jQuery
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM