Use data-attributes in sections inside {% javascript %}

Highlighted
Shopify Partner
3 0 0

Hi guys, im developing a theme for a customer, we are adding a new sections for creating a image  slideshow, but it  is required to add one or more sliders in the same page.

How can i reference the section id or the attributes inside the sections  in the {% javascript %}  {% endjavascript %}

?

 

<div  class="slider-homepage" id="slideshow-{{ section.id }}">
  
  <div class="owl-carousel owl-theme" data-id="{{ section.id }}"  data-speed="{{ section.settings.slider_speed }}"> 
    {% for block in section.blocks %}
      <a class="item" href="{{ block.settings.slide_link }}">
            <img src="{{ block.settings.image_desktop | img_url : '1960x' }}" alt="banner">
            <img src="{{ block.settings.image_mobile | img_url : '750x' }}" alt="banner">
      </a>
    {% endfor %}
   </div>
</div>
 
{% schema %}
  {
    "name": "Image Slider",
"max_blocks": 10,
    "settings": [
 
{
           "type":      "select",
           "id":        "slider_speed",
           "label":     "Slider Speed",
           "options": [
             {
               "group": "value",
               "value": "1000",
               "label": "1 Seg"
             }
           
           ],
           "default":   "1000",
           "info":      "Slider Speed"
        }
 
],
"blocks": [
      {
        "type": "image_picker",
        "name": "Slide Image",
        "settings": [
          {
            "type": "image_picker",
            "id": "image_desktop",
            "label": "Image Desktop"
          },
  {
            "type": "image_picker",
            "id": "image_mobile",
            "label": "Image Mobile"
          },
  {
            "type": "url",
            "id": "slide_link",
            "label": "Slide link"
          }
        ]
      }
    ],
  "presets": [
      {
        "name": "Image slider",
        "category": "Image"
      }
    ]
 
  }
{% endschema %}
{% javascript %}
  var speed = $('.slider-homepage .owl-carousel').data("speed");
  console.log(speed)
 
  $('.slider-homepage .owl-carousel').owlCarousel({
    loop: true,
    margin: 0,
    responsiveClass: true,
    nav: true,
    smartSpeed: 800,
    center:true,
    touchDrag:true,
    autoplay:true,
    autoplayTimeout: speed,
    responsive: {
      0: {
        items: 1
      },
      600: {
        items: 1
      },
      1000: {
        items: 1
      }
    }
  });
 
 
{% endjavascript %}

 

 

0 Likes
Astronaut
884 106 198
I faced a similar problem just the other week, but I'm pretty sure you cant use liquid in those tags or the stylesheet tags. I dont really get the point of the tags though, since you can just use regular script tags orb style tags, and you can use liquid in them. I made a type of text with an ID of "carousel_name" and then initialized slick slider with {{ section.settings.carousel_name }} and then wrapped the whole thing in an if statement seeing if carousel_name was set to make it required.
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