jQuery Cycle2 根本不工作
jQuery Cycle2 Not Working At All
我以前多次使用 Cycle2 都没有问题,但由于某些原因我根本无法使用它。我包括了最新的 jQuery CDN、Cycle2、Cycle2 Shuffle 和 jQuery Easing。
<div class="cycle-slideshow" data-cycle-timeout="5000" data-cycle-fx="shuffle" data-cycle-shuffle-top="-125" data-cycle-shuffle-left="0" data-cycle-speed="1100" data-cycle-pause-on-hover="true" data-cycle-slides="> div.homepage-carousel-item" data-cycle-swipe="true"
data-cycle-ease-out="easeOutBack" data-cycle-easing="easeInOutBack">
<div class="homepage-carousel-item"><img alt="" src="https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s900-c-k-no-mo-rj-c0xffffff/photo.jpg"></div>
<div class="homepage-carousel-item"><img alt="" src="https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s900-c-k-no-mo-rj-c0xffffff/photo.jpg"></div>
<div class="homepage-carousel-item"><img alt="" src="https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s900-c-k-no-mo-rj-c0xffffff/photo.jpg"></div>
</div>
我有一个jsfiddle set up here。我是不是遗漏了一些非常明显的东西???
请试试这个...
img {
width: 250px;
height: auto;
}
.homepage-carousel-item{
background:#fff;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/plugin/jquery.cycle2.carousel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/plugin/jquery.cycle2.swipe.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/plugin/jquery.cycle2.shuffle.min.js"></script>
<div class="cycle-slideshow" data-cycle-timeout="5000" data-cycle-fx="shuffle" data-cycle-shuffle-top="-125" data-cycle-shuffle-left="0" data-cycle-speed="1100" data-cycle-pause-on-hover="true" data-cycle-slides="> div.homepage-carousel-item" data-cycle-swipe="true"
data-cycle-ease-out="easeOutBack" data-cycle-easing="easeInOutBack">
<div class="homepage-carousel-item"><img alt="" src="https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s900-c-k-no-mo-rj-c0xffffff/photo.jpg"></div>
<div class="homepage-carousel-item"><img alt="" src="https://www.google.com/gmail/about/images/any-device.jpg"></div>
<div class="homepage-carousel-item"><img alt="" src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"></div>
</div>
JSFiddle 演示:https://jsfiddle.net/geogeorge/o2s54ctw/
我以前多次使用 Cycle2 都没有问题,但由于某些原因我根本无法使用它。我包括了最新的 jQuery CDN、Cycle2、Cycle2 Shuffle 和 jQuery Easing。
<div class="cycle-slideshow" data-cycle-timeout="5000" data-cycle-fx="shuffle" data-cycle-shuffle-top="-125" data-cycle-shuffle-left="0" data-cycle-speed="1100" data-cycle-pause-on-hover="true" data-cycle-slides="> div.homepage-carousel-item" data-cycle-swipe="true"
data-cycle-ease-out="easeOutBack" data-cycle-easing="easeInOutBack">
<div class="homepage-carousel-item"><img alt="" src="https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s900-c-k-no-mo-rj-c0xffffff/photo.jpg"></div>
<div class="homepage-carousel-item"><img alt="" src="https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s900-c-k-no-mo-rj-c0xffffff/photo.jpg"></div>
<div class="homepage-carousel-item"><img alt="" src="https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s900-c-k-no-mo-rj-c0xffffff/photo.jpg"></div>
</div>
我有一个jsfiddle set up here。我是不是遗漏了一些非常明显的东西???
请试试这个...
img {
width: 250px;
height: auto;
}
.homepage-carousel-item{
background:#fff;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/plugin/jquery.cycle2.carousel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/plugin/jquery.cycle2.swipe.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/plugin/jquery.cycle2.shuffle.min.js"></script>
<div class="cycle-slideshow" data-cycle-timeout="5000" data-cycle-fx="shuffle" data-cycle-shuffle-top="-125" data-cycle-shuffle-left="0" data-cycle-speed="1100" data-cycle-pause-on-hover="true" data-cycle-slides="> div.homepage-carousel-item" data-cycle-swipe="true"
data-cycle-ease-out="easeOutBack" data-cycle-easing="easeInOutBack">
<div class="homepage-carousel-item"><img alt="" src="https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s900-c-k-no-mo-rj-c0xffffff/photo.jpg"></div>
<div class="homepage-carousel-item"><img alt="" src="https://www.google.com/gmail/about/images/any-device.jpg"></div>
<div class="homepage-carousel-item"><img alt="" src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"></div>
</div>
JSFiddle 演示:https://jsfiddle.net/geogeorge/o2s54ctw/