JQuery Flickity Issue

Highlighted
New Member
12 0 0

Hi y'all,

I am pretty new to html/css/javascript, but I have been managing to handle css code and everything straight css related works like a charme so far.

My problem is javascript/jquery related code. This is what I have been doing:

1. I uploaded "jquery-3.3.1.min.js" and "flickity.pkgd.min.js" (my code uses flickity, not sure if I added the right .js though) to the asset folder of my theme

2. I added 

{{ 'jquery-3.3.1.min.js' |  asset_url | script_tag }}
{{ 'flickity.pkgd.min.js' |  asset_url | script_tag }}

above the header of the theme.liquid file

3. I added the following code through a Shogun's html editor module (I have been adding all my html/css code with it so far)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>...</title>
    
   <script>
      var $gallery1 = $('#slider-1 .slides').flickity({
  pageDots: false,
  prevNextButtons: false,
  wrapAround: true,
  draggable: false
});
   
var $gallery2 = $('#slider-2 .slides').flickity({
  pageDots: false,
  prevNextButtons: false,
  initialIndex: 1,
  wrapAround: true,
  draggable: false
});

$('.btn-next').on( 'click', function() {
  $gallery1.flickity('next');
  $gallery2.flickity('next');
});
    </script>
    <style type="text/css">
    
    #container_slider {
  width: 500px;
  height: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

#slider-1 {
  width: 400px;
  //height: 400px;
}

#slider-2 {
  position: absolute;
  right: 0;
  top: 50px;
  width: 150px;
  height: 250px;
}

.slides {
  list-style: none;
  margin: 0;
  padding: 0;
  
  img {
    width: 100%;
    height: auto;
    display: block;
  }
}

/*! Flickity v1.0.2
https://flickity.metafizzy.co
---------------------------------------------- */

.flickity-enabled {
  position: relative;
}

.flickity-enabled:focus { outline: none; }

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
}

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* draggable */

.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
          tap-highlight-color: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.gallery-cell {
  width: 100%;
}

.btn-next {
  background: none;
  border: none;
  position: absolute;
  right: 0;
  bottom: 20px;  
  width: 60px;
  height: 20px;
  padding: 0;
  
  &:focus {
    outline: none;
  }
  
  svg {
    display: block;
    width: 60px;
    height: 20px;
    
    #arrow-line {
        transition: all 0.3s ease-out;
        transform-origin: right bottom;
      }
  }
  
  &:hover {
    svg {
      #arrow-line {
        transform: scaleX(1.5);
      }
    }
  }
}

</style>

  </head>
  <body>
   <div id="container_slider">

  <div id="slider-1">
    <ul class="slides">
      <li class="gallery-cell">
        <img src="https://cdn.shopify.com/s/files/1/2793/0346/files/Webp.net-resizeimage_1.jpg">
      </li>
      <li class="gallery-cell">
        <img src="https://cdn.shopify.com/s/files/1/2793/0346/files/antiguaguatemala-food-smoothie.jpg">
      </li>
      <li class="gallery-cell">
        <img src="https://cdn.shopify.com/s/files/1/2793/0346/files/Webp.net-resizeimage_1.jpg">
      </li>
    </ul>
  </div>

  <div id="slider-2">
    <ul class="slides">
      <li class="gallery-cell">
        <!--<img src="PICTURE LINK" />-->
        <img src="https://cdn.shopify.com/s/files/1/2793/0346/files/antiguaguatemala-food-smoothie.jpg">
      </li>
      <li class="gallery-cell">
        <img src="https://cdn.shopify.com/s/files/1/2793/0346/files/Webp.net-resizeimage_1.jpg">
      </li>
      <li class="gallery-cell">
        <img src="https://cdn.shopify.com/s/files/1/2793/0346/files/antiguaguatemala-food-smoothie.jpg">
      </li>
    </ul>

    <button class="btn-next">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.3 13.4">
        <path id="arrow-line" fill="#231F20" d="M0 5.9h28.7v1H0z"/>
        <path fill="#231F20" d="M24.1 13.4l-.8-.6 4.8-6.4L23.3 0l.8-.6 5.2 7"/>
      </svg>
    </button>

  </div>

</div>
 
  </body>
</html>

 

 

 

The html/css part seem so work proper, the mistake seems to be the flickity/jquery part. 

I would be super grateful for any hint.

 

Thanks!!

0 Likes
Highlighted
New Member
12 0 0

This drives me crazy ;D 

0 Likes
Highlighted
Shopify Expert
9863 98 1699

Are you sure that you need to add in another version of jQuery to the theme? A lot of themes will already be including it so adding another can create all sorts of conflicts if not done correctly (not to mention the added bandwidth load for the customer).

What errors are you seeing in the browser debug console? That might give you some clues as to what's happening as well.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
2 Likes
Highlighted
New Member
12 0 0

I use the Debut theme, I don't think it is included. I have never used the console but will try to run the code and report back. 

0 Likes
Highlighted
New Member
12 0 0

JQuery 1.11 seems to run, you were right.

The console outputs the following error:

html Uncaught ReferenceError: $ is not defined

It points to the first line of javascript code:

var $gallery1 = $('#slider-1 .slides').flickity

 

I tried to add 

<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

but it didn't help.

 

0 Likes
Highlighted
New Member
12 0 0

Any thought?

0 Likes
Highlighted
Shopify Partner
1 0 0

did you resolved this 

0 Likes
Highlighted
New Member
1 0 0

Jquery is included in the Debut theme, it is inside of the vendor.js file. Remove it from there so it doesn't conflict with yours

0 Likes