I've installed Slick sliders synced slides for product images and thumbnails and it all works fine until you use the main image to navigate instead of the thumbnails.
You can see the issue here:
https://monosnap.com/file/2wLtDBErumVnQs8UlA5PtRro8UBQZq
It's run on Shopify but I don't think that would be the issue it's more something to do with centring but I just can't figure it out!
Any help appreciated!
document.addEventListener("DOMContentLoaded", function(event) {
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: false,
centerMode: true,
focusOnSelect: true,
infinite: true
});
});
<div class="slider-for">
{% for image in product.images %}
<img src="{{image | img_url: '565x', crop: 'center'}}" title="{{image.alt | default: product.title | escape}}" alt='{{image.alt | default: product.title | escape}}'/>
{% endfor %}
</div>
<div class="slider-nav">
{% for image in product.images %}
<div>
<img src="{{image | img_url: '400x'}}" alt="{{image.alt | default: product.title | escape}}" class="product-thumbnails">
</div>
{% endfor %}
</div>
Related
For the product images, I want to have small thumbnails and a featured image, which changes based on the thumbnail selected which I did with the Slider Syncing function.
I also want the page to only product images of the color variant selected (e.g. show only blue product when the blue color variant is selected) but the images aren't filtering.
Code for the two image sections (featured image within a div which has a class of .slider-single and thumbnail images are within a div with a class of of .slider-nav)
<div class="product-images js-product-slideshow w-100 w-50-l flex flex-column flex-row-l mb4 pr4-l">
<div class="js-slides slider-single w-100 w-85-l ph2-m ph3-l">
{% for image in product.images %}
<div class="w-100">
<img src="{{ image.src | img_url: '600x', scale: 3 }}" alt="{{ image.alt | escape }}">
</div>
{% endfor %}
</div>
<div class="js-slides slider-nav w-100 w-15-l">
{% for image in product.images %}
<div data-product-color="{{ image.alt }}">
<img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">
</div>
{% endfor %}
</div>
</div>
The code for the slider syncing which works:
$(function() {
$('.slider-single').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 4,
asNavFor: '.slider-single',
vertical: true,
verticalSwiping: true,
arrows: false,
centerMode: true,
focusOnSelect: true
});
});
The code for slide filtering based on product color (which is when the selected variant is equal to the image alt) which doesn't work:
let imageSelect = {
changeImage: function(event) {
let
slideSelector = '.js-slides',
$form = $(document).find(addToCartFormSelector),
selectedVariant = productForm.getActiveVariant($form),
color = selectedVariant.option1,
images = $(slideSelector).find('img'),
$slides = $(document).find(slideSelector),
variantImageId = function() {
let
src = selectedVariant.featured_image.src,
splitSrc = src.split('?v='),
newSrc = splitSrc[1];
return newSrc
};
$.each(images, function(index, image) {
if(image.alt === color || image.src.includes(variantImageId())) {
$(image).parent().addClass('show-slide')
} else {
$(image).parent().removeClass('show-slide')
}
})
$slides.slick('slickFilter', '.show-slide')
},
init: function(event) {
$(addToCartFormSelector).on('change', function(event) {
let $slides = $(document).find(slideSelector)
$('.slider-single').slick('slickUnfilter', '.show-slide')
$('.slider-nav').slick('slickUnfilter', '.show-slide')
imageSelect.changeImage()
})
}
}
imageSelect.init()
I am using slick-carousel in angular 4 slick-carousel
In my home.component.html
<div class="list-books" *ngIf="results?.length > 0">
<div class="col-md-3 col-xs-6" *ngFor="let item of results;let i=index">
<a>
<div class="mt-card-item">
<div class="mt-card-content">
<div class="row">
<div class="col-md-12">
<span>{{item.Name}}</span>
</div>
</div>
<div class="row" >
<div class="col-md-12">
<span>{{item.Address}}</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span class="mt-card-name">{{item.Telephone}}</span>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
Inside my home.component.ts
$('.list-books').slick({
dots: false,
infinite: false,
speed: 300,
fade: false,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
The variable results holds the data to be filled in by the carousel. When the component loads I can se the data but could not load the css and breaks the UI. It looks the data comes first but cant load the css cannot figure it out
I have also added the css in my index.html and slick.min.js in my angular.json
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.1/slick/slick.css" />
"node_modules/slick-carousel/slick/slick.min.js"
Any idea about what could be done. Any help would be appreciated.
Here try Try to add a timeout for your init()
setTimeout(() => { //you slick-carousel init code }, 1000);
In angular js version it worked as suggested by Nick njj
In angular.json it has a section like:
"styles": [
"//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.1/slick/slick.css",
],
Or if you want add your src/style.css
#import "//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.1/slick/slick.css";
And other hand I have found a working example on stackBlitz
example
I have two carousels on my page using owl-carousel. Both show an empty last item. I'm a beginner and I have no idea on how to solve this. Can somebody help me?
I'm using twig to loop trough my php array.
<section id='noticia-carousel' class='pt-0'>
<div class='container main-container'>
<div class='owl-carousel owl-theme'>
{% for noticia in noticias_principais %}
<div class='box'>
<img src='{{noticia.imagem_capa}}' alt='Imagem referente à notícia {{noticia.titulo | striptags}}'>
<div class='titulo'>
<h4><a href='noticia/{{noticia.id}}'> {{noticia.titulo | striptags}} </a></h4>
</div>
</div>
{% endfor %}
<div class="owl-controls">
<div class="owl-nav">
</div>
</div>
</div>
<div class='text-center'>
<button class='btn btn-secondary' onclick="window.location.href='/noticias'">Todas
as Notícias </button>
</div>
</div>
</section>
$('#noticia-carousel .owl-carousel').owlCarousel({
items: 2,
dots: false,
nav: true,
navText: ['<i class="fa fa-angle-left" aria-hidden="true"></i>', '<i class="fa fa-angle-right" aria-hidden="true"></i>'],
animateOut: 'fadeOut',
autoplay: true,
loop: true,
autoplayTimeout: 4000,
autoplayHoverPause: true,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: false
},
600: {
items: 1,
nav: false
},
1000: {
items: 2
},
1300: {
items: 2
}
}
});
Here is how it looks right now: https://educacao.ouropreto.mg.gov.br/
Works great, but the last item is empty. I want it to autoplay and loop.
This HTML after your {% for %} loop has become an item in your carousel because it is a child of .owl-carousel:
<div class="owl-controls">
<div class="owl-nav"></div>
</div>
Remove it and there will be no extra space in the carousel.
I'm using the Slick.JS plugin and have enountered an issue I'm hoping someone can help me with. I have two carousels, both have five slides, with the top carousel showing one slide at a time and the bottom showing all five at a time. The top is movable by arrows and on the bottom each individual slide image is clickable but there are no arrows or dots.
The intended behavior is I want a click on a slide in the carousel showing five at a time (bottom) to move the other carousel to the corresponding slide (a click on slide 3 in the bottom moves the top to slide 3, for example). Similarly, if someone rotates the one on the top, I want the "active" slide at the bottom to correspond to the number of the slide showing at the top.
Here is an example of how I want it to function: https://codepen.io/pjmtokyo/pen/JYyjew. "Slider syncing" here is another one but without the arrows on the bottom: http://kenwheeler.github.io/slick/.
Basically, when I click the arrows on the top nav, the bottom one updates appropriately (adding class "slick-active" to the appropriate slide). However, a click on the bottom nav always returns the top nav to the first slide. What am I doing wrong so clicks on the bottom don't update the top appropriately?
Here are my Slick Options (I'm using slick.1.4.1 with Jquery 3.2.1):
# HOMEPAGE WHO WE SERVE SLIDER
homepageWhoWeServeSlickOptions =
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
asNavFor: '.home-serve-icons',
homeServeIconsOptions =
slidesToShow: 5,
slidesToScroll: 1,
asNavFor: '.home-serve-scroll',
arrows: false,
focusOnSelect: true
$('.home-serve-scroll').slick(homepageWhoWeServeSlickOptions)
$('.home-serve-icons').slick(homeServeIconsOptions)
$('.home-serve-icons .slick-slide').removeClass 'slick-active'
$('.home-serve-icons .slick-slide').eq(0).addClass 'slick-active'
$('.home-serve-scroll').on 'beforeChange', (event, slick, currentSlide, nextSlide) ->
mySlideNumber = nextSlide
$('.home-serve-icons .slick-slide').removeClass 'slick-active'
$('.home-serve-icons .slick-slide').eq(mySlideNumber).addClass 'slick-active'
return
Here is the HTML that Slick is targeting (Twig code interwoven in there):
{% from '_macros/button' import button as m_button %}
{% set whoWeServe = craft.entries.section('homepageWhoWeServe').limit(5) %}
<section>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="home-serve-scroll" style="padding: 0px 40px;">
{% for entry in whoWeServe.all() %}
<div id="serve-{{ loop.index }}">
<h2>{{ entry.title }}</h2>
{{ entry.whoWeServeDescription }}
{% set destination = entry.whoWeServeLandingPage.one.getUrl() %}
{% set text = entry.whoWeServeCtaText | default("Learn More") %}
{{ m_button(destination, text, {classes:'important-cta-button'}) }}
</div>
{% endfor %}
</div>
</div>
</div>
<div class="col-md-10 col-md-offset-1">
<div class="home-serve-icons">
{% for entry in whoWeServe.all() %}
<div id="serve-icon-{{ loop.index }}">
{{ entry.title }}
</div>
{% endfor %}
</div>
</div>
</div>
</section>
So I was able to get this issue resolved. Gouigouix's comment on this issue was the trick: https://github.com/kenwheeler/slick/issues/649
Basically, you have a proper HTML tag within your container div for it to work. I just had a div with some unwrapped text in it. So changing this:
<div class="col-md-10 col-md-offset-1">
<div class="home-serve-icons">
{% for entry in whoWeServe.all() %}
<div id="serve-icon-{{ loop.index }}">
{{ entry.title }}
</div>
{% endfor %}
</div>
</div>
to this:
<div class="col-md-10 col-md-offset-1">
<div class="home-serve-icons">
{% for entry in whoWeServe.all() %}
<div id="serve-icon-{{ loop.index }}">
<p>{{ entry.title }}</p>
</div>
{% endfor %}
</div>
</div>
Was the ticket. Hope that helps someone!
I'm using "Debut" as theme of my store in shopify. I would like to use Slick JS as image slide for my product gallery. I tried and it work! but the functionality of "selecting variants and showing it's image" is gone.
this is my code inside product-template.liquid:
<div class="adsurf_slickslide_container" role='toolbar'>
{% assign index = 0 %}
{% if product.images.size > 1 %}
{% for image in product.images %}
{% assign index = index | plus: 1 %}
<span class="slide" data-index="{{ index }}" data-variant-img="{{ image.id }}">
<img data-advar="{{ product.options_with_values | escape }}" src="{{ image | img_url: '1024x1024' }}" alt="{{ image.alt | escape }}">
</span>
{% endfor %}
{% endif %}
</div>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script type='text/javascript' src='https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js'></script>
<script type='text/javascript'>
$(function(){
$('div.adsurf_slickslide_container').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true
});
$(document).on('change', 'select.single-option-selector', function(){
var customVal = $(this).val();
var hittedIndex = $('span img#' + customVal).data('index');
console.log('span img[addata=' + customVal + ']');
if(hittedIndex != undefined)
$('div.adsurf_slickslide_container').slick('slickGoTo', hittedIndex);
});
});
</script>
Please help. Thanks in advance :)
Shopify debut theme loads vendor.js which included the jQuery already.
I can see you loaded jQuery again. This is the issue i guess.
Remove this line
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
and your theme should work properly.
Kind Regards