jquery - Why not displaying all pictures in carousel -
i have 6 picture blocks in carousel displaying fist 3 images. think wrong jquery don't understand where. @ impasse these pictures, glad hint. thanks!
here blocks images
<div id="collection-images" data-current="0"> <div class="photo-box"> <img id="image0" data-photo="1" data-pos="right" class="coll-img right-img" src="https://doplb1ll3c6nn.cloudfront.net/assets/home/1x/festival.jpg"> </div> <div class="photo-box"> <img id="image2" data-photo="0" data-pos="front" class="coll-img front-img" src="https://doplb1ll3c6nn.cloudfront.net/assets/home/1x/beach.jpg"> </div> <div class="photo-box"> <img id="image1" data-photo="2" data-pos="left" class="coll-img left-img" src="https://doplb1ll3c6nn.cloudfront.net/assets/home/1x/engagement.jpg"> </div> <div class="photo-box"> <img id="image3" data-photo="3" data-pos="right" class="coll-img right-img" src="https://doplb1ll3c6nn.cloudfront.net/assets/home/1x/festival.jpg"> </div> <div class="photo-box"> <img id="image4" data-photo="4" data-pos="right" class="coll-img front-img" src="https://doplb1ll3c6nn.cloudfront.net/assets/home/1x/beach.jpg"> </div> <div class="photo-box"> <img id="image5" data-photo="5" data-pos="right" class="coll-img left-img" src="https://doplb1ll3c6nn.cloudfront.net/assets/home/1x/engagement.jpg"> </div> </div> function onready() {} function gotoclicked(num, pos) { setcollectiontext(num); if (pos == 'front') { return true; } else if (pos == 'right') { rotateimages('left'); } else { rotateimages('right'); } return true; } function initcollection() { var d = getcollection(); (var in d) { o = d[i]; var swiperslide = $("<div></div>"); swiperslide.addclass("swiper-slide"); var centerdom = $("<center></center>"); var reviewpolaroid = $("<div></div>"); reviewpolaroid.addclass("review-polaroid"); var polaroidinner = $("<div></div>"); polaroidinner.addclass("polaroid-inner"); var imgdom = $("<img/>"); imgdom.attr("src", o.cphoto); var reviewheader = $("<div></div>"); reviewheader.addclass("review-header"); reviewheader.html(o.title + ", price" + o.avg.tostring()); var reviewquote = $("<div></div>"); reviewquote.addclass("review-quote"); reviewquote.html(o.desc); polaroidinner.append(imgdom); polaroidinner.append(reviewheader); polaroidinner.append(reviewquote); reviewpolaroid.append(polaroidinner); centerdom.append(reviewpolaroid); swiperslide.append(centerdom); $("#collection-swiper-wrapper").append(swiperslide); } } function rotateimages(direction) { var l = $(".left-img"); var r = $(".right-img"); var f = $(".front-img"); if (direction == 'right') { l.switchclass("left-img", "front-img").attr("data-pos", 'front'); f.switchclass("front-img", "right-img").attr("data-pos", 'right'); r.switchclass("right-img", "left-img").attr("data-pos", 'left'); } else { l.switchclass("left-img", "right-img").attr("data-pos", 'right'); f.switchclass("front-img", "left-img").attr("data-pos", 'left'); r.switchclass("right-img", "front-img").attr("data-pos", 'front'); } } function getcollection() { return [ { title: 'title 1', subtitle: 'subtitle 1', sphoto: "https://doplb1ll3c6nn.cloudfront.net/stylists/213.jpg", cphoto: "http://issi.tv/wp-content/uploads/2016/08/2016-06-29-21.15.04.png", sname: 'person', avg: 200, items: 5, brands: 5, desc: "description 1" }, { title: 'title 2', subtitle: 'subtitle 2', sphoto: "https://doplb1ll3c6nn.cloudfront.net/stylists/213.jpg", cphoto: "http://issi.tv/wp-content/uploads/2014/05/anna-volik.jpg", sname: 'person 2', avg: 202, items: 6, brands: 6, desc: "description 2" }, { title: 'title 3', subtitle: 'subtitle 3', sphoto: "https://doplb1ll3c6nn.cloudfront.net/stylists/213.jpg", cphoto: "http://issi.tv/wp-content/uploads/2016/08/1q9a0621.jpg", sname: 'person 3', avg: 203, items: 7, brands: 7, desc: "description 3" }, { title: 'title 4', subtitle: 'subtitle 4', sphoto: "https://doplb1ll3c6nn.cloudfront.net/stylists/213.jpg", cphoto: "http://issi.tv/wp-content/uploads/2016/08/2016-05-20-17.47.22.png", sname: 'person 4', avg: 203, items: 7, brands: 7, desc: "description 4" }, { title: 'title 5', subtitle: 'subtitle 5', sphoto: "https://doplb1ll3c6nn.cloudfront.net/stylists/213.jpg", cphoto: "http://issi.tv/wp-content/uploads/2016/07/top-men-smart-casual-fashion-with-pictures-of-smart-casual-style-new-in-design.jpg", sname: 'person 5', avg: 203, items: 7, brands: 7, desc: "description 5" }, { title: 'title 6', subtitle: 'subtitle 6', sphoto: "https://doplb1ll3c6nn.cloudfront.net/stylists/213.jpg", cphoto: "http://issi.tv/wp-content/uploads/2016/08/1q9a0621.jpg", sname: 'person 6', avg: 203, items: 7, brands: 7, desc: "description 6" }, ]; } function setcollectiontext(num) { var d = getcollection(); var ind = number(num); if (!isnan(ind)) { ind = ind % 6; $("#collection-current").html((ind + 1).tostring() + "/6"); var da = d[ind]; $("#collection-text").fadeout(400, function() { $("#collection-title").html(da.title); $("#collection-subtitle").html(da.subtitle); $("#collection-stylist #stylist-name").html(da.sname); $("#collection-stylist img").attr("src", da.sphoto); $("#collection-price").html("$" + da.avg); $("#collection-items").html(da.items); $("#collection-brands").html(da.brands); $("#collection-desc").html(da.desc); $("#collection-text").fadein(); }); } } $(document).ready(function() { onready(); var myswiper = new swiper("#review-swiper", { loop: true, pagination: ".review-pagination", paginationclickable: true }); $(".coll-img").click(function() { gotoclicked($(this).attr("data-photo"), $(this).attr('data-pos')); }); $("#collection-prev").click(function() { gotoclicked($(".left-img").attr("data-photo"), 'left'); }); $("#collection-next").click(function() { gotoclicked($(".right-img").attr("data-photo"), 'right'); }); gotoclicked("0", 'front'); initcollection(); new swiper("#collection-swiper", { loop: true, pagination: ".collection-pagination", paginationclickable: true }); });body { background: #f2f2f2 } .main { max-width: 1100px; margin: auto; } /* styles sets post */ .sample-collection { height: 780px } .sample-collection #collection-large { display: block } .sample-collection #collection-small { display: none } .sample-collection #collection-title { font-size: 36px; font-family: "raleway", serif; color: #2c3e50; margin-top: 100px; line-height: 60px; margin-bottom: 14px } .sample-collection #collection-subtitle { font-size: 16px; line-height: 24px; color: #455a64; text-transform: uppercase } .sample-collection #collection-stylist { margin-top: 40px } .sample-collection #collection-stylist img { width: 70px; } table#collection-stats-table, table#collection-stats-table td, table#collection-stats-table th { border: 0px; padding: 0px; } .sample-collection #collection-stylist table#collection-stats-table { font-family: helvetica, "karla", sans-serif; table-layout: fixed; width: 100%; margin: 20px 0px } .sample-collection #collection-stylist table#collection-stats-table .collection-stat { font-size: 30px; color: #90a4ae; filter: progid: dximagetransform.microsoft.alpha(opacity=60); opacity: 0.6; margin-bottom: 5px } .sample-collection #collection-stylist table#collection-stats-table .collection-label { font-size: 14px; font-weight: bold; text-transform: uppercase; color: #90a4ae; filter: progid: dximagetransform.microsoft.alpha(opacity=60); opacity: 0.6 } .sample-collection #collection-stylist #stylist-name { font-weight: 500; font-size: 24px; line-height: 121%; color: #2c3e50; display: inline-block; text-transform: uppercase } .sample-collection #collection-stylist #stylist-desc { margin-left: 10px; font-weight: 300; font-size: 18px; font-color: #455a64; font-style: italic; display: inline-block } .sample-collection #collection-stylist #collection-desc { font-size: 19px; color: #455a64; line-height: 156% } .sample-collection #collection-nav { text-align: center; margin-top: 20px } .sample-collection #collection-nav { text-decoration: none; color: #5f5f5f; cursor: pointer; } .sample-collection #collection-images { height: 600px; position: relative } .sample-collection #collection-images img { position: absolute; width: 300px } .sample-collection #collection-images img:hover { cursor: pointer } .sample-collection #collection-images img.front-img { opacity: 1; top: 108px; left: 75px; z-index: 3 } .sample-collection #collection-images img.left-img { opacity: .3; top: 70px; left: 0px; z-index: 1 } .sample-collection #collection-images img.right-img { opacity: .3; top: 145px; left: 175px; z-index: 2 } div#collection-large .col-md-12.col-sm-12 { margin-bottom: 0px; } @media (min-width: 768px) , (max-width: 979px) { .sample-collection { height: 620px } .sample-collection #collection-small { display: none } .sample-collection #collection-title { font-size: 48px; margin-top: 50px; line-height: 54px; margin-bottom: 10px } .sample-collection #collection-subtitle { font-size: 16px; line-height: 24px } .sample-collection #collection-stylist { margin-top: 40px } .sample-collection #collection-stylist img { max-width: none; width: 70px; height: 70px } .sample-collection #collection-stylist #collection-stats { padding-left: 10px } .sample-collection #collection-stylist #collection-stats table#collection-stats-table { margin: 20px 0px } .sample-collection #collection-stylist #collection-stats table#collection-stats-table .collection-stat { font-size: 24px } .sample-collection #collection-stylist #collection-stats table#collection-stats-table .collection-label { font-size: 14px } .sample-collection #collection-stylist #stylist-name { padding-left: 10px; font-size: 18px; line-height: 121% } .sample-collection #collection-stylist #stylist-desc { margin-left: 10px; font-size: 14px } .sample-collection #collection-stylist #collection-desc { font-size: 16px } .sample-collection #collection-images { height: 520px } .sample-collection #collection-images img { width: 250px } .sample-collection #collection-images img.front-img { left: 50px } .sample-collection #collection-images img.left-img { left: 0px } .sample-collection #collection-images img.right-img { left: 100px } } @media (max-width: 767px) { .ui-slider.ui-widget-content { margin: auto; width: 90% } .row-fluid .controls-row [class*="span"]+[class*="span"] { margin-left: 0 } .slider-scale .slider-labels .slider-label.min-label { text-align: left; left: 0px !important } .slider-scale .slider-labels .slider-label.max-label { text-align: right; right: 0px !important } .sample-collection #collection-small { display: block } .sample-collection #collection-small .title { text-align: center; padding: 40px 0px 0px } .sample-collection #collection-small #collection-swiper { margin-top: 20px } .sample-collection #collection-small .review-polaroid { padding: 10px; background: #fff; -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.5); box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.5); margin: 0px auto; width: 70%; display: table; margin-bottom: 30px } .sample-collection #collection-small .review-polaroid .polaroid-inner { height: auto; overflow: hidden } .sample-collection #collection-small .review-polaroid .polaroid-inner img { max-height: 400px } .sample-collection #collection-small .review-polaroid .polaroid-inner .review-header { text-align: left; line-height: 158%; font-size: 14px; color: #aaaaaa; padding-bottom: 10px } .sample-collection #collection-small .review-polaroid .polaroid-inner .review-quote { font-size: 16px; color: #4e5154; font-style: italic; line-height: 18px; max-width: 100%; text-align: left } .sample-collection #collection-large { display: none } .sample-collection #collection-title { margin-top: 50px } } @media (max-width: 320px) { .sample-collection { height: 800px } .sample-collection #collection-small .review-polaroid .polaroid-inner img { max-height: 370px; width: 250px } .reviews #review-small img { width: 250px } }<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/swiper/3.3.1/css/swiper.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/swiper/3.3.1/js/swiper.jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <div class="main"> <div class="sample-collection"> <div id="collection-small"> <div class="row"> <div class="col-md-12 col-sm-12 title"> <h2>a sample of send</h2> <div class="gray-line middle short"></div> </div> </div> <div class="row"> <div class="col-md-12 col-sm-12"> <div class="swiper-container swiper-container-horizontal" id="collection-swiper"> <div class="swiper-wrapper" id="collection-swiper-wrapper"></div> <div class="collection-pagination swiper-pagination swiper-pagination-clickable"></div> </div> </div> </div> </div> <!-- #collection-small --> <div class="row" id="collection-large"> <div class="col-md-6 col-sm-6"> <div id="collection-text" style="display: block;"> <div id="collection-title"></div> <div id="collection-subtitle"></div> <div id="collection-stylist" class="row"> <div class="col-md-2 col-sm-2"> <img /> </div> <div class="col-md-10 col-sm-10"> <div> <div id="stylist-name"></div> <div id="stylist-desc"></div> </div> <div id="collection-stats"> <table id="collection-stats-table"> <tbody> <tr> <td> <div id="collection-price" class="collection-stat"></div> <div class="collection-label">avg price</div> </td> <td> <div id="collection-brands" class="collection-stat"></div> <div class="collection-label">brands</div> </td> <td> <div id="collection-items" class="collection-stat"></div> <div class="collection-label">items</div> </td> </tr> </tbody> </table> </div> <div id="collection-desc"></div> </div> </div> </div> </div> <div class="col-md-6 col-sm-6"> <div class="row"> <div class="col-md-12 col-sm-12"> <div id="collection-carousel"> <div id="collection-images" data-current="0"> <div class="photo-box"> <img id="image0" data-photo="1" data-pos="right" class="coll-img right-img" src="https://doplb1ll3c6nn.cloudfront.net/assets/home/1x/festival.jpg"> </div> <div class="photo-box"> <img id="image2" data-photo="0" data-pos="front" class="coll-img front-img" src="https://doplb1ll3c6nn.cloudfront.net/assets/home/1x/beach.jpg"> </div> <div class="photo-box"> <img id="image1" data-photo="2" data-pos="left" class="coll-img left-img" src="https://doplb1ll3c6nn.cloudfront.net/assets/home/1x/engagement.jpg"> </div> <div class="photo-box"> <img id="image3" data-photo="3" data-pos="right" class="coll-img right-img" src="https://doplb1ll3c6nn.cloudfront.net/assets/home/1x/festival.jpg"> </div> <div class="photo-box"> <img id="image4" data-photo="4" data-pos="right" class="coll-img front-img" src="https://doplb1ll3c6nn.cloudfront.net/assets/home/1x/beach.jpg"> </div> <div class="photo-box"> <img id="image5" data-photo="5" data-pos="right" class="coll-img left-img" src="https://doplb1ll3c6nn.cloudfront.net/assets/home/1x/engagement.jpg"> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-12 col-sm-12"> <div id="collection-nav"> <a id="collection-prev">←</a> <span id="collection-current"></span> <a id="collection-next">→</a> </div> </div> </div> </div> </div> <!-- #collection-large --> </div> <!-- /sample-collection --> </div>
inside
$("#collection-prev").click(function() { gotoclicked($(".left-img").attr("data-photo"), 'left'); }); $("#collection-next").click(function() { gotoclicked($(".right-img").attr("data-photo"), 'right'); }); $(".left-img");, $(".right-img") in previous , next returns 2 objects of picking attr("data-photo") first 1 handle array
Comments
Post a Comment