I have a problem with Slick Slider (js) that is loading the clones of the slides right after the original, so that slide and its clone are shown one after the other (see img).
This is how I initialize the slider on $(document).ready():
$('.carousel').slick({
dots: false,
infinite: true,
speed: 600,
slidesToShow: 2,
autoplay: true,
prevArrow: '<div class="slick-prev"><i class="mdi mdi-chevron-left"></i></div>',
nextArrow: '<div class="slick-next"><i class="mdi mdi-chevron-right"></i></div>'
})
The html code for slides is called via php.
Edit:
#EdLucas this is the HTML code:
$html = '<div class="carousel" id="'.$client.'">';
$html .= '<div class="prod" id="'.$id.'">
<a href="'.$offerUrl.'" class="'.$id.'" data-lbc="'.$data.'" onclick="filterClick(event)">
<figure class="prod-image">
<img src="'.$imgUrl['newurl'].'" width="'.$imgUrl['dim'].'" height="'.$imgUrl['dim'].'" loading="lazy" />';
if($fprice != null && $fprice > $price):
$html .= '<span class="discount">'.-floor(100 - $price/$fprice * 100) .'%</span>';
endif;
$html .=
$html .= '</figure>
<div class="prod-meta">
<span>'.$name.'</span>
<span class="price">'.$offer->price.$currency.'</span>
<h4>'.$title.'</h4>
</div>
</a>
</div>
</div>';
Related
I have an e-commerce site and am trying to add related products in a carousel at the bottom of the product page:
I query my DB to get the related products and then create a simple Bootstrap carousel.
However, I want there to be more than one item on each slide, but the number of items might change depending on screen size.
Each carousel item is a fixed width and height:
.carousel-item{
width:300px;
height:400px;
border:1px solid var(--grey3);
}
I tried splitting my carousel item into columns with Bootstrap (as shown here https://www.youtube.com/watch?v=SAyLQVR1t5s) but I need them to be a specific size to accommodate product info so having flexible columns within a carousel item to hold each product won't work when I resize the screen.
My PHP code is as follows:
$related .= '<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">';
$related .= '<div class="carousel-inner">';
$i = 0;
$params = [$product_name,$product_name,$_SESSION['locale']['product_set']];
$sql = "SELECT * FROM products WHERE MATCH(product_name) AGAINST(?) AND product_name!=? AND product_set=? LIMIT 15";
$stmt = DB::run($sql,$params);
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
$related_product_id = $row["id"];
$related_product_name = $row["product_name"];
$related .= '<div class="carousel-item';
if($i==0){$related .= ' active';}
$related .= '">';
$related .= '//product_info';
$related .= '</div>';
$i++;
}
$related .= '</div>';
$related .= '<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">';
$related .= '‹';
$related .= '</a>';
$related .= '<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">';
$related .= '›';
$related .= '</a>';
$related .= '</div>';
For future reference, I stopped using Bootstrap and used https://kenwheeler.github.io/slick/ as suggested and it is so much easier
I have a problem. I bring out a slick slider with navigation in tabs on one page, I have a lot of them there. When I bring out one slider, there are no problems. But when 2 or more, all the sliders are broken. I think this is a problem because I have only 1 slider in the js file, and a lot of sliders are displayed on the page via php, and the browser thinks it's the same slider. How can I make it so that each of the sliders becomes unique and in js there was a check for the slider. I output php from Wordpress plugin Advanced custom fields. Help me please in this question.
My JS slick parameters:
jQuery(document).ready(function(){
//Product slider with thumbs
jQuery('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
autoplay: true,
autoplaySpeed: 7000,
fade: true,
asNavFor: '.slider-nav'
});
jQuery('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: false,
centerMode: true,
vertical: true,
verticalSwiping: true,
centerPadding: 150,
appendArrows: jQuery(".slider-nav"),
prevArrow:"<button type='button' class='slick-prev pull-left'><i class='fa fa-angle-left' aria-hidden='true'></i></button>",
nextArrow:"<button type='button' class='slick-next pull-right'><i class='fa fa-angle-right' aria-hidden='true'></i></button>",
focusOnSelect: true,
responsive: [
{
breakpoint: 901,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
vertical: false,
centerMode: true,
centerPadding: 150,
verticalSwiping: false,
dots: false,
swipe: true
}
}]
});
});
My PHP output:
<?php elseif( get_row_layout() == 'type_silder' ): ?>
<?php $product_gallery = get_sub_field('type_slider_gallery');
if( $product_gallery ): ?>
<div class="product-slider-container">
<div class="slider-for">
<?php foreach( $product_gallery as $product_slider ): ?>
<a href="<?php echo get_post_meta( $product_slider['id'], 'link_page_img', true )?>">
<div class="fullsize-img">
<img src="<?php echo $product_slider['sizes']['large']; ?>" alt="<?php echo $product_slider['alt']; ?>"/>
<div class="subtitle-product">
<h3><?php echo $product_slider['title']; ?></h3>
</div>
</div>
</a>
<?php endforeach; ?>
</div>
<div class="slider-nav">
<?php foreach( $product_gallery as $product_slider ): ?>
<div class="thumb-img">
<img src="<?php echo $product_slider['sizes']['thumbnail']; ?>" alt="<?php echo $product_slider['alt']; ?>"/>
</div>
<?php endforeach; ?>
</div>
</div>
<?php endif; ?><!-- product gallery endif -->
<?php endif; ?>
I have implemented slick (http://kenwheeler.github.io/slick/) and everything is fine except the first slide is the first image shown rather than the one clicked on from the list of images, say image 5, image 1 would be displayed. I am using PHP to try and automate the process.
The col-sm-4 while loop displays all the images on the page, then when clicked a modal with the slick will popup and display the images inside the modal. As I said this process works fine, except the position of the image that is clicked. For eg, I click image 6 from the col-sm-4 list of images, but image 1 is displayed.
I would appreciate any assistance from the community. Thanks
**UPdate .. add a data/var and counter menuid to each div, I am just not sure how to access it in the Slick JS initialSlide option shown below: **
<div class="row">
<?php
$query_gallery = "SELECT name, image_location, gallery_id FROM cms_gallery order by image_place asc";
$newmenu = new menu();
$value = $newmenu->mysqlquery($query_gallery);
while ($row = mysqli_fetch_array($value))
{ ?>
<div class='col-sm-4'>
<a title='<?php echo($row[0]); ?> href='#'>
<img class='thumbnail img-responsive images' id='<?php echo($row[2]); ?>' title='<?php echo($row[0]); ?>' src='<?php echo($row[1]); ?>' data-menuid="<?php echo($row[2]); ?>">
<p class='images text-center'><?php echo($row[0]); ?></p>
<p id="demo"></p>
</a>
</div>
<?php } ?>
<div class='modal' id='modal-gallery' role='dialog'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<button class='close' type='button' data-dismiss='modal'>×</button>
<h3 class='modal-title text-center'></h3>
</div>
<div class='modal-body'>
<div id='modal-carousel' class='text-center'>
<div class='your-content'>
<?php
$query_gallery = "SELECT name, image_location, gallery_id FROM cms_gallery order by image_place asc";
$newmenu = new menu();
$value = $newmenu->mysqlquery($query_gallery); $counter = 0;
while ($row = mysqli_fetch_array($value))
{ ?>
<div id="menulist" data-menuid="<?php echo $counter++; ?>">
<h1>'<?php echo($row[0]); ?>'</h1>
<img class='modal-thumbnail' id='<?php echo($row[2]); ?>' title='<?php echo($row[0]); ?>' src='<?php echo($row[1]); ?>' data-menuid="<?php echo($row[2]); ?>">
</div>
<?php } ?>
</div>
</div>
<div class='modal-footer'>
<button class='btn btn-default' data-dismiss='modal'>Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="resources/slick/slick/slick.js"></script>
<script>
$('.thumbnail').click(function(){
$("#modal-gallery").modal("show");//.modal('show')/.modal('hide');
});
var menulist = $("#menulist");
var menuid = menulist.data("menuid");
$( "#menulist" ).click(function() {
var myId = $( "#menulist" ).data("menuid");
$( "#menulist" ).attr("menuid", myId);
});
$(document).ready(function(){
$('.your-content').slick({
/* lazyLoad: 'ondemand', */
/* centerMode: true, */
dots: true,
/* infinite: true, */
speed: 500,
fade: true,
adaptiveHeight: true,
focusOnSelect: true,
cssEase: 'linear',
/* initialSlide: 1, */
setPosition: 1,
/* slickGoTo: 8, */
initialSlide: menuid
});
});
</script>
I would like to auto-open Lightbox when I open page.
This is a edited page to wordpress plug-in -> career portfolio. is it possible? Thanks
I have created a link from image in the page to iframe Lightbox to portfolio. Good solutions is to see gallery directly opened whiteout click.
Thank you for your time
<script>
(function($) {
jQuery('#gallery').crpTiledLayer({});
$( ".crp-light-gallery" ).each(function() {
var id = $( this ).attr("id");
$("#" + id).lightGallery({
mode: 'slide',
useCSS: true,
cssEasing: 'ease', //'cubic-bezier(0.25, 0, 0.25, 1)',//
easing: 'linear', //'for jquery animation',//
speed: 600,
addClass: '',
closable: true,
loop: true,
auto: false,
pause: 6000,
escKey: true,
controls: true,
hideControlOnEnd: false,
preload: 1, //number of preload slides. will exicute only after the current slide is fully loaded. ex:// you clicked on 4th image and if preload = 1 then 3rd slide and 5th slide will be loaded in the background after the 4th slide is fully loaded.. if preload is 2 then 2nd 3rd 5th 6th slides will be preloaded.. ... ...
showAfterLoad: true,
selector: null,
index: false,
lang: {
allPhotos: 'All photos'
},
counter: false,
exThumbImage: false,
thumbnail: true,
showThumbByDefault:false,
animateThumb: true,
currentPagerPosition: 'middle',
thumbWidth: 150,
thumbMargin: 10,
mobileSrc: false,
mobileSrcMaxWidth: 640,
swipeThreshold: 50,
enableTouch: true,
enableDrag: true,
vimeoColor: 'CCCCCC',
youtubePlayerParams: false, // See: https://developers.google.com/youtube/player_parameters,
videoAutoplay: true,
videoMaxWidth: '855px',
dynamic: false,
dynamicEl: [],
// Callbacks el = current plugin
onOpen : function(el) {}, // Executes immediately after the gallery is loaded.
onSlideBefore : function(el) {}, // Executes immediately before each transition.
onSlideAfter : function(el) {}, // Executes immediately after each transition.
onSlideNext : function(el) {}, // Executes immediately before each "Next" transition.
onSlidePrev : function(el) {}, // Executes immediately before each "Prev" transition.
onBeforeClose : function(el) {}, // Executes immediately before the start of the close process.
onCloseAfter : function(el) {}, // Executes immediately once lightGallery is closed.
onOpenExternal : function(el) {
var href = $(el).attr("data-url");
crp_loadHref(href,true);
}, // Executes immediately before each "open external" transition.
onToggleInfo : function(el) {
var $info = $(".lg-info");
if($info.css("opacity") == 1){
$info.fadeTo("slow",0);
}else{
$info.fadeTo("slow",1);
}
} // Executes immediately before each "toggle info" transition.
});
});
jQuery(".tile").on('click', function (event){
event.preventDefault();
if(jQuery(event.target).hasClass("fa") && !jQuery(event.target).hasClass("zoom")) return;
var tileId = jQuery(this).attr("id");
var target = jQuery("#" + tileId + " .crp-light-gallery li:first");
target.trigger( "click" );
});
})( jQuery );
<div class="crp-wrapper">
<div id="gallery">
<div id="ftg-items" class="ftg-items">
<?php foreach($crp_portfolio->projects as $crp_project): ?>
<div id="crp-tile-<?php echo $crp_project->id?>" class="tile">
<?php
$coverInfo = CRPHelper::decode2Str($crp_project->cover);
$coverInfo = CRPHelper::decode2Obj($coverInfo);
$meta = CRPHelper::getAttachementMeta($coverInfo->id, $crp_portfolio->options[CRPOption::kThumbnailQuality]);
?>
<a id="<?php echo $crp_project->id ?>" class="tile-inner">
<img class="crp-item" src="<?php echo $meta['src'] ?>" data-width="<?php echo $meta['width']; ?>" data-height="<?php echo $meta['height']; ?>" />
<div class="caption"></div>
</a>
<ul id="crp-light-gallery-<?php echo $crp_project->id; ?>" class="crp-light-gallery" style="display: none;" data-sub-html="<?php echo crp_infoBox( $crp_project)?>" data-url="<?php echo isset($crp_project->url) ? $crp_project->url : ''; ?>">
<?php
$meta = CRPHelper::getAttachementMeta($coverInfo->id);
$metaThumb = CRPHelper::getAttachementMeta($coverInfo->id, "medium");
?>
<li data-src="<?php echo $meta['src']; ?>" >
<a href="#">
<img src="<?php echo $metaThumb['src']; ?>" />
</a>
</li>
<?php foreach($crp_project->pics as $pic): ?>
<?php if(!empty($pic)): ?>
<?php
$picInfo = CRPHelper::decode2Str($pic);
$picInfo = CRPHelper::decode2Obj($picInfo);
$meta = CRPHelper::getAttachementMeta($picInfo->id);
$metaThumb = CRPHelper::getAttachementMeta($picInfo->id, "medium");
?>
<li data-src="<?php echo $meta['src']; ?>">
<a href="#">
<img src="<?php echo $metaThumb['src']; ?>" />
</a>
</li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
</div>
<?php endforeach; ?>
</div>
</div>
I heve solved with this code in the end of js:
window.setTimeout('clickit()',20);
function clickit(){ document.getElementById("<?php echo $crp_project->id ?>").click();
}
<div onload="script();" class="crp-wrapper">
<div id="gallery">
<div id="ftg-items" class="ftg-items">
<?php foreach($crp_portfolio->projects as $crp_project): ?>
<div id="crp-tile-<?php echo $crp_project->id?>" class="tile">
<?php
$coverInfo = CRPHelper::decode2Str($crp_project->cover);
$coverInfo = CRPHelper::decode2Obj($coverInfo);
$meta = CRPHelper::getAttachementMeta($coverInfo->id, $crp_portfolio->options[CRPOption::kThumbnailQuality]);
?>
<a id="<?php echo $crp_project->id ?>" class="tile-inner">
<img class="crp-item" src="<?php echo $meta['src'] ?>" data-width="<?php echo $meta['width']; ?>" data-height="<?php echo $meta['height']; ?>" />
<div class="caption"></div>
</a>
<ul id="crp-light-gallery-<?php echo $crp_project->id; ?>" class="crp-light-gallery" style="display: none;" data-sub-html="<?php echo crp_infoBox( $crp_project)?>" data-url="<?php echo isset($crp_project->url) ? $crp_project->url : ''; ?>">
<?php
$meta = CRPHelper::getAttachementMeta($coverInfo->id);
$metaThumb = CRPHelper::getAttachementMeta($coverInfo->id, "medium");
?>
<li data-src="<?php echo $meta['src']; ?>" >
<a href="#">
<img src="<?php echo $metaThumb['src']; ?>" />
</a>
</li>
<?php foreach($crp_project->pics as $pic): ?>
<?php if(!empty($pic)): ?>
<?php
$picInfo = CRPHelper::decode2Str($pic);
$picInfo = CRPHelper::decode2Obj($picInfo);
$meta = CRPHelper::getAttachementMeta($picInfo->id);
$metaThumb = CRPHelper::getAttachementMeta($picInfo->id, "medium");
?>
<li data-src="<?php echo $meta['src']; ?>">
<a href="#">
<img src="<?php echo $metaThumb['src']; ?>" />
</a>
</li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
</div>
<?php endforeach; ?>
</div>
</div>
JavaScript:
<script>
function script()
{
jQuery('#gallery').crpTiledLayer({});
$( ".crp-light-gallery" ).each(function() {
var id = $( this ).attr("id");
$("#" + id).lightGallery({
mode: 'slide',
useCSS: true,
cssEasing: 'ease', //'cubic-bezier(0.25, 0, 0.25, 1)',//
easing: 'linear', //'for jquery animation',//
speed: 600,
addClass: '',
closable: true,
loop: true,
auto: false,
pause: 6000,
escKey: true,
controls: true,
hideControlOnEnd: false,
preload: 1, //number of preload slides. will exicute only after the current slide is fully loaded. ex:// you clicked on 4th image and if preload = 1 then 3rd slide and 5th slide will be loaded in the background after the 4th slide is fully loaded.. if preload is 2 then 2nd 3rd 5th 6th slides will be preloaded.. ... ...
showAfterLoad: true,
selector: null,
index: false,
lang: {
allPhotos: 'All photos'
},
counter: false,
exThumbImage: false,
thumbnail: true,
showThumbByDefault:false,
animateThumb: true,
currentPagerPosition: 'middle',
thumbWidth: 150,
thumbMargin: 10,
mobileSrc: false,
mobileSrcMaxWidth: 640,
swipeThreshold: 50,
enableTouch: true,
enableDrag: true,
vimeoColor: 'CCCCCC',
youtubePlayerParams: false, // See: https://developers.google.com/youtube/player_parameters,
videoAutoplay: true,
videoMaxWidth: '855px',
dynamic: false,
dynamicEl: [],
// Callbacks el = current plugin
onOpen : function(el) {}, // Executes immediately after the gallery is loaded.
onSlideBefore : function(el) {}, // Executes immediately before each transition.
onSlideAfter : function(el) {}, // Executes immediately after each transition.
onSlideNext : function(el) {}, // Executes immediately before each "Next" transition.
onSlidePrev : function(el) {}, // Executes immediately before each "Prev" transition.
onBeforeClose : function(el) {}, // Executes immediately before the start of the close process.
onCloseAfter : function(el) {}, // Executes immediately once lightGallery is closed.
onOpenExternal : function(el) {
var href = $(el).attr("data-url");
crp_loadHref(href,true);
}, // Executes immediately before each "open external" transition.
onToggleInfo : function(el) {
var $info = $(".lg-info");
if($info.css("opacity") == 1){
$info.fadeTo("slow",0);
}else{
$info.fadeTo("slow",1);
}
} // Executes immediately before each "toggle info" transition.
});
});
jQuery(".tile").on('click', function (event){
event.preventDefault();
if(jQuery(event.target).hasClass("fa") && !jQuery(event.target).hasClass("zoom")) return;
var tileId = jQuery(this).attr("id");
var target = jQuery("#" + tileId + " .crp-light-gallery li:first");
target.trigger( "click" );
};
})( jQuery );
I'm using Ken Wheeler Slick.js to display a carousel on my page.
I'm using the carousel to display a list of thumbnails. These thumbnails can be clicked to show in a preview section on the page and if the preview image is clicked, a carousel of full size images pop up. I want the carousel of full size images to strt on the correct picture that is clicked. To do this I'm using the data-slick-index attribute
Here is 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/
With this code the slick('slickGoTo', index) does not work properly. The fullsize carousel remains on the first index.
Any help would be greatly appreciated.
I was able to get this to work by using
$('#image-popup').slick('unslick'); when I close the popup.