FROM CACHE - en_header

Slick Slider integration almost working! HELP

Mathieu_St-Pier
New Member
9 0 0

Hi!! I'm trying to have the Slick Slider (http://kenwheeler.github.io/slick/) showing correctly on shopify. I have read on that and i'm almost done but I have a CSS problem I think.

I have made my desired version separately and then i'm trying to integrate this version to my shopify. 
Working version: http://terrafalkon.ca/_shieldtek/

Here is the integration i have done:

1- Uploaded the files in the Assets folder: slick.css, slick-theme.css, slick.js

2- Theme.liquid:

before </head>

{% if template.directory == 'customers' %}
    <!--[if (gt IE 9)|!(IE)]><!--><script src="{{ 'shopify_common.js' | shopify_asset_url }}" defer="defer"></script><!--<![endif]-->
    <!--[if lte IE 9]><script src="{{ 'shopify_common.js' | shopify_asset_url }}"></script><![endif]-->
  {% endif %}

  <!--[if (gt IE 9)|!(IE)]><!--><script src="{{ 'vendor.js' | asset_url }}" defer="defer"></script><!--<![endif]-->
  <!--[if lte IE 9]><script src="{{ 'vendor.js' | asset_url }}"></script><![endif]-->

  <!--[if (gt IE 9)|!(IE)]><!--><script src="{{ 'theme.js' | asset_url }}" defer="defer"></script><!--<![endif]-->
  <!--[if lte IE 9]><script src="{{ 'theme.js' | asset_url }}"></script><![endif]-->
  {{ content_for_header }}
  
  {% if template == 'index' %}
  {{ 'slick.css' | asset_url | stylesheet_tag }}
  {{ 'slick-theme.css' | asset_url | stylesheet_tag }}
  {% endif %}

Before </body>

{% if template == 'index' %}
  {{ 'slick.js' | asset_url | script_tag }}
  <script type="text/javascript">
    $(document).on('ready', function() {
      $('.center').slick({
		  dots: true,
		  centerMode: true,
		  centerPadding: '60px',
		  slidesToShow: 3,
		  autoplay: true,
		  autoplaySpeed: 2000,
		  
		  responsive: [
			{
			  breakpoint: 768,
			  settings: {
				arrows: true,
				centerMode: true,
				centerPadding: '40px',
				slidesToShow: 3
			  }
			},
			{
			  breakpoint: 480,
			  settings: {
				arrows: true,
				centerMode: true,
				centerPadding: '40px',
				slidesToShow: 1
			  }
			}
		  ]
});
    });

  </script>
{% endif %}


3- Then i created a new section with the code:

<div class="page-width">
	<div class="section-header text-center">
		<h4 class="h2">CHOOSE YOUR DEVICE</h4>
  	</div>
<div class="custom-content">
	<section class="center slider"> 
     <button type="button" data-role="none" class="slick-prev slick-arrow" aria-label="Previous" role="button" style="display: block;">Previous</button>
      <div>
          <a href="#1">
          {{ 'slider_iphone.svg' | asset_url | img_tag }}
          </a>
          <h3 align="center">test2</h3>
      </div>
      <div>
          <a href="#2">
          {{ 'slider_iphone.svg' | asset_url | img_tag }}
          </a>
          <h3 align="center">test2</h3>
      </div>
      <div>
          <a href="#3">
          {{ 'slider_iphone.svg' | asset_url | img_tag }}
          </a>
          <h3 align="center">test2</h3>
      </div>
      <div>
          <a href="#1">
          {{ 'slider_iphone.svg' | asset_url | img_tag }}
          </a>
          <h3 align="center">test2</h3>
      </div>
      <div>
          <a href="#1">
          {{ 'slider_iphone.svg' | asset_url | img_tag }}
          </a>
          <h3 align="center">test2</h3>
      </div>
      <div>
          <a href="#1">
          {{ 'slider_iphone.svg' | asset_url | img_tag }}
          </a>
          <h3 align="center">test2</h3>
      </div>
     <button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Previous" role="button" style="display: block;">Next</button>
  	</section>  
  </div>
</div>

{% schema %}
  {
    "name": "Slick Slider",

"presets": [
    {
      "name": "Slick Slider",
      "category": "Product Slider"
    }
  ]
  }
{% endschema %}

4- Finally added my section where I want it:

I don't know whats wrong but here is what it looks like to my homepage:

 

Thanks !!

Replies 6 (6)
Jason
Shopify Expert
10918 193 2191

Seeing the site live would be helpful as I'd assume you've got a JavaScript error somewhere. Looking at the limited code posted I don't see anything that suggests that jQuery is loaded, yet your code is using jQuery. That would be one of the first things to check.

If you're not willing to let the forum members see the live site at least review what errors may be in the browser debug logs. That might give some clues as to where the issue is.

★ I jump on these forums in my free time to help and share some insights. Not looking to be hired, and not looking for work. http://freakdesign.com.au ★
Mathieu_St-Pier
New Member
9 0 0

Hi Jason, thanks for your reply.

I had an error loading jquery as you said. I thought my theme was loading it. So I added the line to my code and now its loading. Now theres 3 errors remaining but they are not a problem, I will remove them later.

I downloaded the latest jquery and uploaded it to my assets then I added the line above the slick.js (bottom of the theme.liquid file)

 

{{ 'jquery321.js' | asset_url | script_tag }}
  {{ 'slick.js' | asset_url | script_tag }}



BUT, still not working. I have sent you an email with the shop password.

Mathieu_St-Pier
New Member
9 0 0

Got it.

I dont know why but jquery wan't loading properly. Instead of uploading the jquery file into my assets I loaded it from the web

 

<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

Weird..

Jason
Shopify Expert
10918 193 2191

Are you sure that jquery just wasn't loading until later and you had just been calling it too soon? Some themes don't load it in the head, but prefer to load it at the end of the page instead for better load speeds.

Best double check that you're not loading jQuery twice as that can create its own issues.

★ I jump on these forums in my free time to help and share some insights. Not looking to be hired, and not looking for work. http://freakdesign.com.au ★
Mathieu_St-Pier
New Member
9 0 0

Yes I made local test playing around with JS calls and JQuery was the problem. I have it working now. I'm just playing with css now to fit my theme.

Thanks for your replies Jason!

Duy_Tran
New Member
3 0 0

Hi Jason, 

I have a problem with JQuery as well. Can you help me? I'm using carousel from Bootstrap. I already put bootstrap css and jquery in asset folder and load them by this command: {{ 'boostrap.min.js' | asset_url | script_tag }} but It keeps saying this error: Uncaught Typeerror: $(...).carousel is not a funciton. I really need your help.

Thank you