Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- $('.slider-main').slick({
- infinite: true,
- centerMode: true,
- prevArrow: "#slider-p2",
- nextArrow: "#slider-n2",
- mobileFirst: true,
- slidesToShow: 1,
- slidesToScroll: 1,
- autoplay: true,
- responsive: [
- {
- breakpoint: 480,
- settings: {
- centerMode: true,
- slidesToShow: 1,
- autoplaySpeed: 3000,
- slidesToScroll: 1
- }
- },
- {
- breakpoint: 768,
- settings: {
- centerMode: true,
- autoplaySpeed: 5000,
- slidesToShow: 3,
- slidesToScroll: 1
- }
- },
- {
- breakpoint: 1024,
- settings: {
- centerMode: true,
- slidesToShow: 5,
- slidesToScroll: 1
- }
- }
- ]
- });
- $('.slider-main').on('afterChange', function(event, slick, currentSlide,
- nextSlide){
- var elSlide = $(slick.$slides[currentSlide]);
- var dataIndex = elSlide.data('index');
- $('.slider-content').each(function(){
- if ($(this).data('id') == dataIndex) {
- $(this).show();
- } else {
- $(this).hide();
- }
- });
- });
- <div class="container">
- {% if section.settings.slider_heading != blank %}
- <h2 class="title center">{{ section.settings.slider_heading }}</h2>
- <div class="feature_divider"></div>
- {% endif %}
- {% if section.settings.slider_subheading != blank %}
- <h3>{{ section.settings.slider_subheading }}</h3>
- {% endif %}
- {% if section.settings.slider_content != blank %}
- {{ section.settings.slider_content }}
- {% endif %}
- </div>
- {{ 'jquery-3.3.1.js' | asset_url | script_tag }}
- {{ 'slick.js' | asset_url | script_tag }}
- <div id="slider-all">
- <table class="fixed">
- <col id=slider-col-1 />
- <col id=slider-col-2 />
- <col id=slider-col-3 />
- <tr>
- <td colspan="3">
- <div class="slider-main" id="slider-wrapper" style="z-index: 1;">
- <div data-index="1" class="slider-image-1">{% if
- section.settings.item1_link != blank %}<a href="{{
- section.settings.item1_link }}">{% endif %}<img src="{{
- section.settings.image_item1 | img_url: '600x431' }}">{% if
- section.settings.item1_link != blank %}</a>{% endif %}</div>
- <div data-index="2" class="slider-image-2">{% if
- section.settings.item2_link != blank %}<a href="{{
- section.settings.item2_link }}">{% endif %}<img src="{{
- section.settings.image_item2 | img_url: '600x431' }}">{% if
- section.settings.item2_link != blank %}</a>{% endif %}</div>
- <div data-index="3" class="slider-image-3">{% if
- section.settings.item3_link != blank %}<a href="{{
- section.settings.item3_link }}">{% endif %}<img src="{{
- section.settings.image_item3 | img_url: '600x431' }}">{% if
- section.settings.item3_link != blank %}</a>{% endif %}</div>
- <div data-index="4" class="slider-image-4">{% if
- section.settings.item4_link != blank %}<a href="{{
- section.settings.item4_link }}">{% endif %}<img src="{{
- section.settings.image_item4 | img_url: '600x431' }}">{% if
- section.settings.item4_link != blank %}</a>{% endif %}</div>
- <div data-index="5" class="slider-image-5">{% if
- section.settings.item5_link != blank %}<a href="{{
- section.settings.item5_link }}">{% endif %}<img src="{{
- section.settings.image_item5 | img_url: '600x431' }}">{% if
- section.settings.item5_link != blank %}</a>{% endif %}</div>
- <div data-index="6" class="slider-image-6">{% if
- section.settings.item6_link != blank %}<a href="{{
- section.settings.item6_link }}">{% endif %}<img src="{{
- section.settings.image_item6 | img_url: '600x431' }}">{% if
- section.settings.item6_link != blank %}</a>{% endif %}</div>
- </div>
- </td>
- </tr>
- <div id="slider-info" class="clearfix">
- <tr>
- <div id="slider-content-box">
- <td id="prev-arrow"><a href="#" id="slider-p2"><div id="slider-prev"
- class="slider-arrows">{{ 'black-arrow-thing.svg
- ' | asset_url | img_tag }}</div></a></td>
- <td id="content-image-slider">
- <div class="wexslide" id="slider-text">
- <div class="slider-content slider-one" data-id="1">
- {% if section.settings.item6_title != blank %}
- <h4 class="slider-title">{{ section.settings.item1_title
- }}</h4>
- {% endif %}
- {% if section.settings.item1_content != blank %}
- <div class="slider-description"> {{
- section.settings.item1_content }}</div>
- {% endif %}
- </div>
- <div class="slider-content slider-two" data-id="2">
- {% if section.settings.item6_title != blank %}
- <h4 class="slider-title">{{ section.settings.item2_title
- }}</h4>
- {% endif %}
- {% if section.settings.item1_content != blank %}
- <div class="slider-description"> {{
- section.settings.item2_content }}</div>
- {% endif %}
- </div>
- <div class="slider-content slider-three" data-id="3">
- {% if section.settings.item6_title != blank %}
- <h4 class="slider-title">{{ section.settings.item3_title
- }}</h4>
- {% endif %}
- {% if section.settings.item1_content != blank %}
- <div class="slider-description"> {{
- section.settings.item3_content }}</div>
- {% endif %}
- </div>
- <div class="slider-content slider-four" data-id="4">
- {% if section.settings.item6_title != blank %}
- <h4 class="slider-title">{{ section.settings.item4_title
- }}</h4>
- {% endif %}
- {% if section.settings.item1_content != blank %}
- <div class="slider-description"> {{
- section.settings.item4_content }}</div>
- {% endif %}
- </div>
- <div class="slider-content slider-five" data-id="5">
- {% if section.settings.item6_title != blank %}
- <h4 class="slider-title">{{ section.settings.item5_title
- }}</h4>
- {% endif %}
- {% if section.settings.item1_content != blank %}
- <div class="slider-description"> {{
- section.settings.item5_content }}</div>
- {% endif %}
- </div>
- <div class="slider-content slider-six" data-id="6">
- {% if section.settings.item6_title != blank %}
- <h4 class="slider-title">{{ section.settings.item6_title
- }}</h4>
- {% endif %}
- {% if section.settings.item1_content != blank %}
- <div class="slider-description"> {{
- section.settings.item6_content }}</div>
- {% endif %}
- </div>
- </div>
- </td>
- <td id="next-arrow"><a href="#" id="slider-n2"><div id="slider-next"
- class="slider-arrows">{{ 'black-arrow-thing.svg
- ' | asset_url | img_tag }}</div></a></td>
- </div>
- </tr>
- </div>
- </table>
- </div>
- {{ 'image-slider.js' | asset_url | script_tag }}
- <script type="text/javascript">
- $('.slider-main').on('afterChange', function(event, slick, currentSlide,
- nextSlide){
- var elSlide = $(slick.$slides[currentSlide]);
- var dataIndex = elSlide.data('index');
- $('.slider-content').each(function(){
- if ($(this).data('id') == dataIndex) {
- $(this).show();
- } else {
- $(this).hide();
- }
- });
- });
- </script>
- {% schema %}
- {
- "name": "Image Slider",
- "settings": [
- {
- "type": "text",
- "id": "slider_heading",
- "label": "Heading",
- "default": "Check These Out!"
- },
- {
- "type": "image_picker",
- "id": "image_item1",
- "label": "Image 1",
- "info": "600px x 431px recommended"
- },
- {
- "type": "text",
- "id": "item1_title",
- "label": "Item 1 Title",
- "default": "Item One"
- },
- {
- "type": "richtext",
- "id": "item1_content",
- "label": "Text",
- "default": "<p>Phasellus viverra nulla ut metus varius laoreet. Etiam
- sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis
- venenatis ante odio sit amet eros. Etiam imperdiet imperdiet orci.</p>"
- },
- {
- "type": "url",
- "id": "item1_link",
- "label": "Item 1 link"
- },
- {
- "type": "image_picker",
- "id": "image_item2",
- "label": "Image 2",
- "info": "600px x 431px recommended"
- },
- {
- "type": "text",
- "id": "item2_title",
- "label": "Item 2 Title",
- "default": "Item Two"
- },
- {
- "type": "richtext",
- "id": "item2_content",
- "label": "Item 2 Text",
- "default": "<p>Phasellus viverra nulla ut metus varius laoreet. Etiam
- sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis
- venenatis ante odio sit amet eros. Etiam imperdiet imperdiet orci.</p>"
- },
- {
- "type": "url",
- "id": "item2_link",
- "label": "Item 2 Link"
- },
- {
- "type": "image_picker",
- "id": "image_item3",
- "label": "Image 3",
- "info": "600px x 431px recommended"
- },
- {
- "type": "text",
- "id": "item3_title",
- "label": "Item 3 Title",
- "default": "Item Three"
- },
- {
- "type": "richtext",
- "id": "item3_content",
- "label": "Item 3 Text",
- "default": "<p>Phasellus viverra nulla ut metus varius laoreet. Etiam
- sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis
- venenatis ante odio sit amet eros. Etiam imperdiet imperdiet orci.</p>"
- },
- {
- "type": "url",
- "id": "item3_link",
- "label": "Item 3 Link"
- },
- {
- "type": "image_picker",
- "id": "image_item4",
- "label": "Image 4",
- "info": "600px x 431px recommended"
- },
- {
- "type": "text",
- "id": "item4_title",
- "label": "Item 4 Title",
- "default": "Item Four"
- },
- {
- "type": "richtext",
- "id": "item4_content",
- "label": "Item Four Text",
- "default": "<p>Phasellus viverra nulla ut metus varius laoreet. Etiam
- sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis
- venenatis ante odio sit amet eros. Etiam imperdiet imperdiet orci.</p>"
- },
- {
- "type": "url",
- "id": "item4_link",
- "label": "Item 4 Link"
- },
- {
- "type": "image_picker",
- "id": "image_item5",
- "label": "Image 5",
- "info": "600px x 431px recommended"
- },
- {
- "type": "text",
- "id": "item5_title",
- "label": "Item 5 Title",
- "default": "Item Five"
- },
- {
- "type": "richtext",
- "id": "item5_content",
- "label": "Item Five Text",
- "default": "<p>Phasellus viverra nulla ut metus varius laoreet. Etiam
- sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis
- venenatis ante odio sit amet eros. Etiam imperdiet imperdiet orci.</p>"
- },
- {
- "type": "url",
- "id": "item5_link",
- "label": "Item 5 Link"
- },
- {
- "type": "image_picker",
- "id": "image_item6",
- "label": "Image 6",
- "info": "600px x 431px recommended"
- },
- {
- "type": "text",
- "id": "item6_title",
- "label": "Item 6 Title",
- "default": "Item Six"
- },
- {
- "type": "richtext",
- "id": "item6_content",
- "label": "Item Six Text",
- "default": "<p>Phasellus viverra nulla ut metus varius laoreet. Etiam
- sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis
- venenatis ante odio sit amet eros. Etiam imperdiet imperdiet orci.</p>"
- },
- {
- "type": "url",
- "id": "item6_link",
- "label": "Item 6 Link"
- }
- ],
- "presets": [
- {
- "name": "Image Slider",
- "category": "Image Slider"
- }
- ]
- }
- {% endschema %}
- {% javascript %}
- {% endjavascript %}
Add Comment
Please, Sign In to add comment