Slider not working properly

Solved
Tourist
16 0 1

Hi,

I have a slider section with up to 8 slides but i can't seem to understand why the images will not change although the autoplay speed is set and the arrows and dots for the slide will not show up as again,they are set as follows:

<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css"/>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css"/><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.min.js"></script>
<section class="section">
{% if section.blocks.size > 0 %}
<div class="slider_wrap" data-slick='{"autoplay": {{ section.settings.carousel_autoplay }}, "autoplaySpeed": {{ section.settings.autoplay_speed }}, "dots": {{ section.settings.carousel_dots }}, "arrows": {{ section.settings.carousel_arrows }}}'>

  {% for block in section.blocks %}
    <div class="slider_item">
        <div class="slider_img_wrap">
          <img src="{{ block.settings.slide_img | img_url: 'original' }}" alt="" class="slider_img">
        </div>
      <div class="content_wrap">
      <div class="slider_content">
        <h2 class="slider_title">{{  block.settings.slide_title }}</h2>
        <p class="slider_text">{{  block.settings.slide_text }}</p>
        <a href="{{ block.settings.slide_link }}" class="button">{{ block.settings.button_title }}</a>
      </div>
    </div>
  {% endfor %}
</div>
  </div>
{% endif %}
</section>
{% schema %}
{
"name": "Carousel",
"max_blocks": 8,
"settings": [
  {
    "type":"header",
    "content":"Carousel option"
  },
  {
    "type": "checkbox",
    "id": "carousel_autoplay",
    "label": "Enable autoplay",
    "default": false
  },
  {
    "type": "checkbox",
    "id": "carousel_dots",
    "label": "Enable dots",
    "default": false
  },
  {
    "type": "checkbox",
    "id": "carousel_arrows",
    "label": "Enable arrows",
    "default": false
  },
  {
    "type": "select",
    "id": "autoplay_speed",
    "label": "Change slides every",
      "options": [
      { "value": "1000", "label": "1 seconds" },
      { "value": "2000", "label": "2 seconds" },
      { "value": "3000", "label": "3 seconds" },
      { "value": "4000", "label": "4 seconds" },
      { "value": "5000", "label": "5 seconds" },
      { "value": "6000", "label": "6 seconds" },
      { "value": "7000", "label": "7 seconds" },
      { "value": "8000", "label": "8 seconds" },
      { "value": "9000", "label": "9 seconds" },
      { "value": "10000", "label": "10 seconds" }
    ],
    "default": "7000"
  }
],
"blocks": [
  {
  "type": "slide",
  "name": "Slide",
  "settings": [
        {
          "type": "text",
          "id": "button_title",
          "label": "Button title"
        },
        {
          "type": "url",
          "id": "slide_link",
          "label": "Slide link"
        },
        {
          "type": "text",
          "id": "slide_title",
          "label": "Slider title"
        },
        {
          "type": "textarea",
          "id": "slide_text",
          "label": "Slide text"
        },
        {
          "type": "image_picker",
          "id": "slide_img",
          "label": "Add img for slide"
        }
      ]
    }
  ]
}
{% endschema %}

<script>
  $(document).ready(function(){
    
$('.slider_wrap').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
  arrows:true,
  dots: true
});
    });
</script>
<style>
  .slider_wrap {
width: 100%;
height: auto;
-webkit-box-shadow: 0px 3px 5px #BBB;
-moz-box-shadow: 0px 3px 5px #bbb;
box-shadow: 0px 3px 5px #BBB;
position: relative;
overflow: hidden;
}

  .slick-prev:before, .slick-next:before{
    color:red;
}
</style>

Can someone please tell me what might be the problem in this case?I don't understand why it's not working and I have double-checked to see if everything is ok and there's no problem as far as I can tell.

0 Likes
Astronaut
884 106 198

Can you post a link to your site? Everything looks okay, but I've never used the data-slick attribute to pass information to slick. Ive used slick dozens of times and while using it in sections there's always something small that I miss that screws it up.  You wouldn't happen to have more than one of this section on your homepage would you?

 

 

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Tourist
16 0 1

First of all thank you for your response.This is the link:https://vision-group-store.myshopify.com and the password is:cupcake.I looked over everything and there's no duplicate section anywhere in the index page(that's the only place where i declared it).

 

 

Best regards,

Maria

0 Likes

Success.

Astronaut
884 106 198

Looks like you're missing a closing div tag in your forloop, so it's nesting the  slider-items into eachother. Try putting another closing div before your {% endfor %} 

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
Tourist
16 0 1

It works super nice now, thank you so much for your help.I have one more unclarity though.As I have the dots and arrows selected to be visible for the slide,it does not seem to be working as expected as they are not visible.I have tried to delete them from the jquery function as i thought it will be declared twice both in schema declarations and javascript and will interfere with each other.I know I am asking a lot,but can you please help me understand what is stoping the settings in schema to work properly?

0 Likes