I have 2 sync slider in the top slider I need to add at a specific place informations which is not in the bottom slider. How could I still keep this in sync correctly?
HTML:
<div class="example example1">
<div class="slider slider-for">
<div>1</div>
<div>2</div>
<div>3</div>
<div>
Only exist here
</div>
<div>4</div>
</div>
<div class="slider slider-nav">
<div><p>1</p></div>
<div><p>2</p></div>
<div><p>3</p></div>
<div><p>4</p></div>
</div>
</div>
Javascript:
jQuery('.example1 .slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
fade: false,
asNavFor: '.example1 .slider-nav',
dots: false,
arrows:true,
appendArrows: '.pr_images',
prevArrow:'<i class="fa fa-angle-left slick-prev"></i>',
nextArrow:'<i class="fa fa-angle-right slick-next"></i>'
});
jQuery('.example1 .slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.example1 .slider-for',
dots: false,
arrows:false,
centerMode: false,
focusOnSelect: true
});
Fiddle: http://jsfiddle.net/45w9k4qb/
Have you tried the option
slide: '.slide'
As shown here:
https://codepen.io/quarkus/pen/JKPgza
So If you give all the slide you want visible the class .slide it might work?
Related
I want to configure Slick Slider to have one row in first slide and two rows in all others, like this -> desired result.
These are current settings of the slideshow:
$('#our-team-slider').slick({
rows: 2,
dots: true,
arrows: false,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1600,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true
}
},
{
breakpoint: 1205,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
infinite: true
}
}
]
});
How can it be done?
One solution would be to create a slide with one "card" in it and subsequent slides with two "cards" each, and then setting rows: 1. For example:
<div id="our-team-slider">
<div class="slide">
<div class="card">...</div>
</div>
<div class="slide">
<div class="card">...</div>
<div class="card">...</div>
</div>
<div class="slide>
<div class="card">...</div>
<div class="card">...</div>
</div>
</div>
You could then style the slides with two cards so that the cards are stacked.
Trying to add an active class to the first a tag within a selected tab.
My code is adding the active class to the very first element in slide one and doing exactly what I want within slider one but then when I change tabs it is still adding the active class to the navigation on the first slider not slider 2 that is in view.
JS
$(document).ready(function(){
var $slideshow = $(".slider").slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true,
swipeToSlide: true,
touchThreshold: 3,
arrows: false
});
$('.links').on('click', 'a', function( e ) {
var slideIndex = $(this).closest('li').index();
$slideshow.slick( 'slickGoTo', parseInt( slideIndex ) );
$('.links li a').removeClass('slick-current');
$(this).addClass('slick-current');
e.preventDefault();
});
//Re draw slider when data tabs change
$('[data-tabs]').on('change.zf.tabs', function() {
$('.slider').slick("setPosition", 0);
$('.slider').slick("slickGoTo", 0);
});
$('.slider').on('afterChange', function(event,slick,i){
$('.links li a').removeClass('slick-current');
$('.links li a').eq(i).addClass('slick-current');
});
// document ready
$('.links li a').eq(0).addClass('slick-current');
});
HTML
<div class="sidebar-nav">
<ul class="tabs vertical" id="example-vert-tabs" data-tabs>
<li class="tabs-title is-active">Tab 1</li>
<li class="tabs-title">Tab2</li>
</ul>
</div>
<div class="tabs-panel is-active" id="panel1v">
<div class="large-12 columns">
<div class="large-3 columns page-content-left">
<ul class="links">
<li>slide1</li>
<li>slide2</li>
<li>slide3</li>
</ul>
</div>
<div id="" class="large-9 columns page-content-right">
<section class="slider" id="slider1">
<div class="slide">
</div>
<div class="slide">
</div>
<div class="slide">
</div>
</section>
</div>
</div>
</div>
<div class="tabs-panel" id="panel2v">
<div class="large-12 columns">
<div class="large-3 columns page-content-left">
<ul class="links">
<li>slide1</li>
<li>slide2</li>
<li>slide3</li>
</ul>
</div>
<div id="" class="large-9 columns page-content-right">
<section class="slider" id="slider2">
<div class="slide">
</div>
<div class="slide">
</div>
<div class="slide">
</div>
</section>
</div>
</div>
</div>
Your problem is that the listeners are set for both sliders. You have to create each slider individually. I'd say the simplest solution is to create a jQuery function that handles all that.
So with your HTML, the code necessary would about look like so (it's not perfectly optimized but easy to read)
// create a new jQuery function
$.fn.extend({
createTabSlider: function() {
var $self = $(this)
// $self is the tab, to get an element you DONT use $('something')
// you use $self.find("something")
var $slideshow = $self.find(".slider").slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true,
swipeToSlide: true,
touchThreshold: 3,
arrows: false
})
$self.find(".links").on("click", "a", function(e) {
var slideIndex = $(this).closest("li").index()
$slideshow.slick("slickGoTo", slideIndex)
})
$slideshow.on("afterChange", function(event, slick, i) {
$self.find(".links li a").removeClass("slick-current")
$self.find(".links li a").eq(i).addClass("slick-current")
})
$self.find(".links li a").eq(0).addClass("slick-current")
}
})
// create a slider for each tab
$("#panel1v").createTabSlider()
$("#panel2v").createTabSlider()
You can try using on function in id rather than class and remove and add class referring from parent element i.e. panel2v or panel1v. and dont forget to use on function for both slider. Hope it works.
Slick can't handle multiple sliders being instantiated together. You need to instantiate the sliders individually using ids.
var $slideshow1 = $("#slider1").slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true,
swipeToSlide: true,
touchThreshold: 3,
arrows: false
});
var $slideshow2 = $("#slider2").slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true,
swipeToSlide: true,
touchThreshold: 3,
arrows: false
});
You should still be able to hook in your events to both at once using the classes though.
Ok I'm a bit of a noob and not entirely sure how I should ask this question.
I will start by showing my code
HTML:
<div class="image-popup-container">
<button id="close"><i class="fa fa-times"></i></button>
<div id="closearea"></div>
<ul id="image-popup" class="image-popup">
<li class="product-image">
<img src="http://algaecal.cloudcreations.ca/wp-content/uploads/2017/07/AlgaeCal-guarantee-7-year-square.png" alt="AlgaeCal 7 Years Guarantee" />
</li>
<li class="product-image">
<img src="http://algaecal.cloudcreations.ca/wp-content/uploads/2017/07/AlgaeCal-Plus-Product-Main-Image.png" alt="AlgaeCal Plus Main Product Image" />
</li>
<li class="product-video">
<iframe src="//fast.wistia.net/embed/iframe/w4ithbv9tz" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="640" height="360"></iframe>
</li>
</ul>
</div>
<div class="images">
<div id="image-preview" data-slick-index="0">
<img src="http://algaecal.cloudcreations.ca/wp-content/uploads/2017/07/AlgaeCal-guarantee-7-year-square.png" alt="AlgaeCal 7 Years Guarantee" />
</div>
<ul id="image-thumbs" class="thumbnails">
<li class="product-image-thumbnail">
<img src="http://algaecal.cloudcreations.ca/wp-content/uploads/2017/07/AlgaeCal-guarantee-7-year-square.png" alt="AlgaeCal 7 Years Guarantee" />
</li>
<li class="product-image-thumbnail">
<img src="http://algaecal.cloudcreations.ca/wp-content/uploads/2017/07/AlgaeCal-Plus-Product-Main-Image.png" alt="AlgaeCal Plus Main Product Image" />
</li>
<li class="product-video-thumbnail">
<img src="http://algaecal.cloudcreations.ca/wp-content/uploads/2017/07/AlgaeCal-Plus-Product-Main-Video-Thumbnail.jpg">
</li>
</ul>
</div>
jQuery
$(document).ready(function(){
// Load Carousel of thumbnails
$('.thumbnails').slick({
dots: false,
prevArrow: '<button type="button" data-role="none" class="slick-prev slick-arrow slick-disabled" aria-label="Previous" role="button" aria-disabled="true" style="display: block;"><i class="fa fa-chevron-left"></i></button>',
nextArrow: '<button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button" style="display: block;" aria-disabled="false"><i class="fa fa-chevron-right"></i></button>',
infinite: false,
speed: 300,
slidesToShow: 1,
centerMode: false,
variableWidth: true
});
// Grab Preview image
var imagePreview = $("#image-preview")
// Open product video thumbnail into iframe popup
// Listen for when product-video-thumbnail is clicked
$('.product-video-thumbnail').click(function(){
// Grab clicked product-video-thumbnail data-slick-index
var videoData = $(this).attr('data-slick-index');
imagePopupContainer.fadeIn();
$('.image-popup').slick({
centerMode: true,
prevArrow: '<button type="button" data-role="none" class="slick-prev slick-arrow slick-disabled" aria-label="Previous" role="button" aria-disabled="true" style="display: block;"><i class="fa fa-chevron-left"></i></button>',
nextArrow: '<button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button" style="display: block;" aria-disabled="false"><i class="fa fa-chevron-right"></i></button>',
centerPadding: '60px',
slidesToShow: 1,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
// Go to the correct slide
$('.image-popup').slick('slickGoTo', videoData);
});
// Listen for when product-image-thumbnail is clicked
$('.product-image-thumbnail').click(function(){
// Grab clicked product-image-thumbnail attributes and img attributes
var imageSrc = $(this).find('img').attr('src');
var imageAlt = $(this).find('img').attr('alt');
var imageData = $(this).attr('data-slick-index');
// Fade out the preview image
imagePreview.fadeOut( function(){
// Change preview image src to clicked thumbnail src
imagePreview.find('img').attr("src", imageSrc);
// Change preview image alt to clicked thumbnail alt
imagePreview.find('img').attr("alt", imageAlt);
// Update the slick-index for modal popup carousel
imagePreview.attr("data-slick-index", imageData);
});
// Fade the preview image back into view
imagePreview.fadeIn();
});
var imagePopupContainer = $(".image-popup-container")
imagePreview.click(function(){
imagePopupContainer.fadeIn();
$('.image-popup').slick({
centerMode: true,
prevArrow: '<button type="button" data-role="none" class="slick-prev slick-arrow slick-disabled" aria-label="Previous" role="button" aria-disabled="true" style="display: block;"><i class="fa fa-chevron-left"></i></button>',
nextArrow: '<button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button" style="display: block;" aria-disabled="false"><i class="fa fa-chevron-right"></i></button>',
centerPadding: '60px',
slidesToShow: 1,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
var index = $("#image-preview").attr("data-slick-index");
alert(index);
$('.image-popup').slick('slickGoTo', index);
})
$("#closearea").click(function(){
imagePopupContainer.fadeOut();
});
$("#close").click(function(){
imagePopupContainer.fadeOut();
});
});
You can see this currently in action here http://algaecal.cloudcreations.ca/
When you click on the Image preview it should pop an alert box howing the data-slick-index value, then open the fullsize preview-image. If you close the fullsize image and clicked a different thumbnail, that will update the preview image to the clicked thumbnail. Then if you click on the updated preview image it should show an alert box and then the updated preview image, however it is showing the previous preview image and no alert box.
I have no idea why this is happening. Its like after the first jquery function is performed the DOM is updated and the next jquery function performed does not grab the correct `data-slick-index' from the DOM and does not do the alert.
I'm terribly sorry for this poorly worded question. I just do not have the knowledge to properly ask this question.
Any help would be greatly appreciated.
You have to do the fadein AFTER you set the picture.
Give that a try and let us know if it helped
I have a slider:
<div class="super-slick responsive">
<div class="profile-photo slider-image" style="height:400px;width:200px;background-color: blue;>
</div>
<div class="profile-photo slider-image" style="height:400px;width:200px;background-color: blue;>
</div>
<div class="profile-photo slider-image" style="height:400px;width:200px;background-color: blue;>
</div>
<div class="profile-photo slider-image" style="height:400px;width:200px;background-color: blue;>
</div>
</div>
slider:
$(".super-slider").slick({
dots: true,
slidesToShow: 4,
slidesToScroll: 4,
rows: 1
})
...and everything works and updating settings works, but I cannot seem to update the number of rows using slickSetOption:
super_slider.slick("slickSetOption", "slidesPerRow", 2)
super_slider.slick("slickSetOption", "slidesToScroll", 1)
super_slider.slick("slickSetOption", "rows", 2, true)
but when I call slickGetOption, it tells me the change has taken place:
console:
> super_slider.slick("slickGetOption", "rows")
> 2
I have on the page, there are two identical sliders, but they may be more. I need to make a custom button Next for each of sliders. I try to do so:
HTML
<div class="slider-wrap">
<div class="slider">
<div class="slider-item">Slide 1</div>
<div class="slider-item">Slide 2</div>
<div class="slider-item">Slide 3</div>
</div>
<button id="next">Next ></button>
</div>
<div class="slider-wrap">
<div class="slider">
<div class="slider-item">Slide 1</div>
<div class="slider-item">Slide 2</div>
<div class="slider-item">Slide 3</div>
</div>
<button id="next">Next ></button>
</div>
jQuery
$('.slider').slick({
dots: true,
nextArrow: $('#next')
});
Demo: http://codepen.io/fabric/pen/bwprxJ
Update:
Second demo: http://codepen.io/fabric/pen/KgzZVz
If I click on the next button of the first slide, then the slide is changed of the second. And if the second, then nothing works. How to fix it?
Add unique ids+ class to each slider & navigation
$('.slider').slick({
dots: true,
nextArrow: $('#next')
});
$('.slider2').slick({
dots: true,
nextArrow: $('#next2')
});
http://codepen.io/anon/pen/QKNxNj
for your second example you change the navigation id to a class
$('.slider').slick({
dots: true
});
$('.next').click(function(){
$(this).prev().slick('slickNext');
});
http://codepen.io/anon/pen/vXGAxb
A more elegant solution might be to trigger off a class name, and then create nextArrow events for each instance of that class.
$('.slider-wrap').each(function (index, sliderWrap) {
var $slider = $(sliderWrap).find('.slider');
var $next = $(sliderWrap).find('.next');
$slider.slick({
dots: true,
nextArrow: $next
});
});
And change the button id's to classes. This has the added benefit of giving you a copy/paste'able template for variable amounts of sliders on a single page without having to create unique id's each time.
*edit: working solution http://codepen.io/nominalaeon/pen/gwAdjd
You should use unique ids for this
$('#slider1').slick({
dots: true,
nextArrow: $('#next1')
});
$('#slider2').slick({
dots: true,
nextArrow: $('#next2')
});
http://codepen.io/pranesh-r/pen/qakKNY