I am building a slider with slick than is 10 sliders. Each one is a slice of a horizontal slide of an image.
If one of them is clicked then they should all slide to the same random index with slickGoTo. However if a slide is currently being animated that one slider finishes it's animation instead of going to the proper slide.
I tried to stop the animation with $('.slick-track').stop(true, true); but that doesn't work.
Any ideas on how I can get slickGoTo to go to the right slide or stop the animation and then call slickGoTo?
HTML
<div class="your-class">
<img src="images/aaron_09.jpg" />
<img src="images/ferrier_09.jpg" />
<img src="images/hassan_09.jpg" />
<img src="images/heimz_09.jpg" />
<img src="images/joe_09.jpg" />
<img src="images/paul_09.jpg" />
<img src="images/savitha_09.jpg" />
<img src="images/vaughn_09.jpg" />
</div>
<div class="your-class">
<img src="images/aaron_10.jpg" />
<img src="images/ferrier_10.jpg" />
<img src="images/hassan_10.jpg" />
<img src="images/heimz_10.jpg" />
<img src="images/joe_10.jpg" />
<img src="images/paul_10.jpg" />
<img src="images/savitha_10.jpg" />
<img src="images/vaughn_10.jpg" />
</div>
JS
$(document).ready(function(){
var slick_settings = {
slidesToShow: 1,
adaptiveHeight: true,
dots: false,
arrows: false,
infinite: true,
speed: 1000
};
var slider_collection = $('.your-class');
var slick_collection = slider_collection.slick(slick_settings);
var slick_collection_length = slick_collection.length -1;// -1 since it is used for indexes
// slide a random slider left or right
function slide() {
var slider_key = Math.floor(Math.random() * slick_collection_length);
var slider = slider_collection[ slider_key ];
// pause on hover
if(slider_collection.filter(function() { return $(this).is(":hover"); }).length){
return;
}
// left or right
if(Math.random() >= 0.5){
$(slider).slick('slickNext');
}
$(slider).slick('slickPrev');
}
setInterval(slide, 2000);
// build a image
$(slider_collection).click(function(e){
var slider_key = Math.floor(Math.random() * slick_collection_length);
$('.slick-track').stop(true, true); // doesnt stop the animation
$(slider_collection).each(function(){
$(this).slick('slickGoTo', slider_key);
});
});
});
I needed to set waitForAnimate: false This option was in the git repos readme and not on the website.
For example:
$('.class').slick('slickGoTo', 2, true);
will not animate
and
$('.class').slick('slickGoTo', 2, false);
will animate
The docs say:
slickGoTo
Arguments : int : slide number, boolean: dont animate
Navigates to a slide by index
Related
Hello I'm using this plug in :https://github.com/elclanrs/jq-tiles
for creating an image slider in header of my website. I'm using Asp.net MVC.
unfortunately the slider wont work as like as demo. instead of showing one row and one column it shows the slider in 2 columns and x rows (x is the number of images i use in my slider.
this is my index cshtml code :
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="~/Content/jquery.tiles.min.css" rel="stylesheet" />
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
</script>
<script src="~/Scripts/jquery.tiles.js"></script>
<div class="slider">
<img src="~/Content/img/img01.jpg" /> <!-- No description -->
<img src="~/Content/img/img02.jpg" /> <!-- No description -->
<img src="~/Content/img/img03.jpg" /> <!-- No description -->
<img src="~/Content/img/img04.jpg" /> <!-- No description -->
<img src="~/Content/img/img05.jpg" /> <!-- No description -->
<img src="~/Content/img/img06.jpg" /> <!-- No description -->
<img src="~/Content/img/img07.jpg" /> <!-- No description -->
<img src="~/Content/img/img08.jpg" /> <!-- No description -->
<img src="~/Content/img/img09.jpg" /> <!-- No description -->
<img src="~/Content/img/img10.jpg" /> <!-- No description -->
</div>
<script>
$('.slider').tilesSlider({
x: 15, // # of tiles in x axis, 20 max
y: 10, // # of tiles in y axis, 20 max
effect: 'simple',
fade: false, // fade images in addition to the tiles effect
random: true, // animate tiles in random order
reverse: false, // start animation from opposite direction
backReverse: false, // reverse the animation when going back in the slideshow (useful for some effects)
rewind: false, // reverse animation at a certain percentage in time
auto: true, // Start the slideshow on load
loop: true, // Start slideshow again when it finishes
slideSpeed: 3500, // time between slides
tileSpeed: 800, // time to clear all tiles
cssSpeed: 300, // css3 transition speed [100,200,300,400,500,600,700,800,900,1000],
nav: false, // Add navigation
navWrap: null, // Add the navigation to an existing element
bullets: false, // Show bullets, if false the show pagination with numbers
thumbs: false, // Show thumbnails when hovering nav
thumbSize: 25, // Thumbnail size (percentage of the original image)
timer: false // show or hide the timer bar
});
</script>
The animation and transitions works just fine the only problem is the repeating of image as shown in figure:
Try to set carousel item wrapper style as background-repeat: no-repeat
As the sketch above shows, I need a slider gallery where four images slide to left one by one automatically. As the fourth image leaves, the first one follows as if it were the fifth.
How can I achieve this goal, without any plugins, just CSS and a little bit JavaScript?
Please check below code
<script type="text/javascript" src="js/jquery.flexislider.js"></script>
<div id="slider">
<div id="imageloader" style="display: none;">
<img src="images/header-logos_04.jpg" />
</div>
<img src="images/header-logos_04.jpg" />
<img src="images/header-logos_05.jpg" />
<img src="images/header-logos_02.jpg" />
<img src="images/header-logos_03.jpg" />
<img src="images/header-logos_02.jpg " />
<img src="images/header-logos_03.jpg" />
</div>
jquery.flexislider.js
jQuery(window).load(function(){
pic = jQuery("#slider").children("img");
numImgs = pic.length;
arrLeft = new Array(numImgs);
for (i=0;i<numImgs;i++){
totalWidth=0;
for(n=0;n<i;n++){
totalWidth += jQuery(pic[n]).width();
}
arrLeft[i] = totalWidth;
jQuery(pic[i]).css("left",totalWidth);
}
myInterval = setInterval("flexiScroll()",speed);
jQuery('#imageloader').hide();
jQuery(pic).show();
});
function flexiScroll(){
for (i=0;i<numImgs;i++){
arrLeft[i] -= 1;
if (arrLeft[i] == -(jQuery(pic[i]).width())){
totalWidth = 0;
for (n=0;n<numImgs;n++){
if (n!=i){
totalWidth += jQuery(pic[n]).width();
}
}
arrLeft[i] = totalWidth;
}
jQuery(pic[i]).css("left",arrLeft[i]);
}
}
The idea is to insert the images one at a time into HTML and have them take on the banner functionality, the tricky part that we couldn't repeat anything in HTML so keyframe should be used to animate it,
Check that article for the complete solution, and that live demo
The plugin doesnt seem to be working for me on this project im working on, whenever i load the page to view the slider the transitions aren't working, i've looked at the file paths for the references to the javascript files and css files and they are correct.
I'll post the code below if anyone could help that'd be great!
Jquery:
$(window).load(function () {
$('#slider').nivoSlider({
effect: 'boxRain', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 3000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: false, // Next & Prev navigation
controlNav: false, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
randomStart: false, // Start on a random slide
beforeChange: function () { }, // Triggers before a slide transition
afterChange: function () { }, // Triggers after a slide transition
slideshowEnd: function () { }, // Triggers after all slides have been shown
lastSlide: function () { }, // Triggers when last slide is shown
afterLoad: function () { } // Triggers when slider has loaded
});
});
File Refs:
<script src="assets/Nivo-Slider-master/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script src="assets/Nivo-Slider-master/nivoslider.jquery.json"></script>
<link rel="stylesheet" href="/assets/Nivo-Slider-master/nivo-slider.css" type="text/css" media="screen" />
Example Slider code of mine:
<div id="slider" class="nivoSlider" >
<uc1:ImageCarouselll runat="server" ID="ctrl_Images" />
</div>
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" style="display: none;">
<div class="slides" style="width: 138240px;"></div>
<h3 class="title">Image from Unsplash</h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
</asp:Content>
The control code is as follows:
<asp:Repeater ID="rptPhotos" runat="server">
<ItemTemplate>
<a href="/images/<%# Eval("ImageURL").ToString() %>" data-gallery="">
<img class="TheImage" src="/images/<%# Eval("ImageURL").ToString() %>" alt="test" /></a>
</ItemTemplate>
<AlternatingItemTemplate>
<a href="/images/<%# Eval("ImageURL").ToString() %>" data-gallery="">
<img class="TheImage" src="/images/<%# Eval("ImageURL").ToString() %>" alt="test" /></a>
</AlternatingItemTemplate>
</asp:Repeater>
Any help is greatly appreciated! Thanks!
$("#" + IdToInitialize).cycle("destroy").cycle({
fx: $("#cyclescroll").val(),
easing: $("#cyclebounce").val(),
speed: 1000,
timeout: 2000
});
Whats the problem here , why cycle plugin is not initializing again with new settings?
Try this way:-
$("#" + IdToInitialize).cycle("destroy");
$("#" + IdToInitialize).cycle({
fx: $("#cyclescroll").val(),
easing: $("#cyclebounce").val(),
speed: 1000,
timeout: 2000
});
Make sure
$("#cyclescroll").val() should return the values as fade, scrollUp, shuffle
$("#cyclebounce").val() should return the values as easeInOutBack, easeOutBack
Refer Cycle Options
One of the values you are using to reinitialize your plugin is incorrect. Eitehr IdToInitialize, fx, or easing are not correct.
http://jsfiddle.net/ny2Tj/3/
The following works as expected when clicking on the button:
<div id="sliders">
<div id="slideshow">
<img src="http://scienceblogs.com/startswithabang/upload/2012/04/why_should_there_be_dark_matte/AS17-148-22727_lrg-thumb-500x500-74032.jpeg" />
<img src="http://weblogs.marylandweather.com/4526619322_1912218db8.jpg" />
<img src="http://www.silverstar-academy.com/Blog/wp-content/uploads/2012/03/03-14-12N00184967.jpg" />
<img src="http://cdn.the2012scenario.com/wp-content/uploads/2011/11/sunspot-500x500.jpg" />
</div>
<div id="pager"></div>
</div>
<button id="reinit">Reinit</button>
JS:
$('#slideshow').cycle({fx:'scrollHorz', pager: '#pager'});
$('#reinit').click(function() {
$('#slideshow').cycle('destroy').cycle({fx:'scrollVert'}); // change effect remove pager
});
i want to make slideshow and I want to be its behavior every 2 minutes slide down 1 pictures and so on , until the end of the images , and start again from the first picture .
I tried to make it and i make part of it (every 2 minutes change picture) but not slide down 1 pictures but change picture without slide down .
And one help me to make entire slideshow
My code is below
HTML
<div id="slideshow">
<img src="images/slideshow.jpg" alt="" title="" />
<img src="images/slideshow2.jpg" alt="" title="" />
<img src="images/slideshow3.jpg" alt="" title="" />
<img src="images/slideshow4.jpg" alt="" title="" />
<img src="images/slideshow5.jpg" alt="" title="" />
</div>
<script type="text/javascript">
window.onload = slideShow;
</script>
Javascript
var counter = 0;
function slideShow(){
var fatherElem = document.getElementById('slideshow');
var fatherChildren = fatherElem.children;
var fatherElemScroll = fatherElem.scrollTop;
counter++;
if (fatherChildren.length > counter) {
fatherElem.scrollTop += 300;
}
else {
fatherElem.scrollTop = 0;
counter = 0;
}
setTimeout(slideShow, 1000);
document.getElementsByName('SearchBox')[0].value = counter;
}
I'm sorry for my big question but i'm really need help
You're manipulating scrollTop on the slideshow div by 300px every second. If your images are exactly 300px high and your div is exactly 300px high with no overflow and your div forces your images to be vertically in a row, then what your code would do is switch to the next image every second. So, in answer to your questions:
You have not written any code for the image to slide. Changing scrollTop by 300 is a sudden change, not a sliding change.
Your code changes the scrollTop value every second, not every two minutes. The second parameter to setTimeout is a value in milliseconds. If you want two minutes, you would have to set that value to (1000 * 60 * 2).
Here's your code in action on jsfiddle: http://jsfiddle.net/jfriend00/NyYpB/ with some real images.
If you want the images to actually slide, then you will have to write some animation code to slowly manipulate scrollTop from it's present value to the enxt higher value continuously over the period of time you want the animation to run.
Animation can be tricky to do well from scratch. Most people will choose to either use CSS3 animation or use an animation library (like the one in jQuery or YUI) that has already done the right kind of tweening work for you because it will be faster and probably generate a higher quality result.
Here's a working example you can see and play with using jQuery: http://jsfiddle.net/jfriend00/CyCDD/.
HTML:
<div id="slideshow">
<img src="http://friend.smugmug.com/Sports/Palo-Alto-Rowing-Club-2011/Pacific-Regatta-Men/Rowing-201102130938160417/1190079664_chLyW-Ti.jpg" alt="" title="" />
<img src="http://friend.smugmug.com/Sports/Palo-Alto-Rowing-Club-2011/Pacific-Regatta-Men/Rowing-201102130941050422/1190083195_Az688-Ti.jpg" alt="" title="" />
<img src="http://friend.smugmug.com/Sports/Palo-Alto-Rowing-Club-2011/Pacific-Regatta-Men/Rowing-201102130941050421/1190083481_C3nag-Ti.jpg" alt="" title="" />
<img src="http://friend.smugmug.com/Sports/Palo-Alto-Rowing-Club-2011/Pacific-Regatta-Men/Rowing-201102130941070426/1190078330_umaLY-Ti.jpg" alt="" title="" />
<img src="http://friend.smugmug.com/Sports/Palo-Alto-Rowing-Club-2011/Pacific-Regatta-Men/Rowing-201102130941070425/1190080772_RmZX2-Ti.jpg" alt="" title="" />
</div>
CSS:
#slideshow {width: 100px; height: 66px; font-size: 0; overflow: hidden;}
Javascript:
var counter = 0;
function gotoNextSlide() {
var $ss = $("#slideshow");
if (counter >= $ss.children().length - 1) {
counter = 0;
} else {
counter++;
}
$ss.animate({'scrollTop': (counter * 66) + 'px'}, 1000);
}
setInterval(gotoNextSlide, 3000);