Slick carousel code works on fiddle but doesn't on my website?

ohmygodimpregnant 0
Viewed 38

I found slick carousel. Ive been working on it and coding it. For some reason my code works properly when inputted on fiddle but not on my website or on stackoverflow code snippet. Ive been reviewing the code for a good amount of time trying to see what the issue can be. Any suggestions to what the issue might be? I have added my code into the snippet below and here is a link to my fiddle jsfiddle.net/ao0ug3vh/9

/*=============== Partners Section ===============*/

 $(document).ready(function(){
    $('.partners-logos').slick({
        slidesToShow: 6,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 1500,
        arrows: false,
        dots: false,
        pauseOnHover: false,
        responsive: [{
            breakpoints: 768,
            settings: {
                slidesToShow: 4
            }
        }, {
            breakpoints: 520,
            settings: {
                slidesToShow: 3
            }
        }]
    });
});



 
/*=============== SHOW MENU ===============*/
const navMenu = document.getElementById('nav-menu'),
      navToggle = document.getElementById('nav-toggle'),
      navClose = document.getElementById('nav-close')

/*===== MENU SHOW =====*/
/* Validate if constant exists */
if(navToggle){
    navToggle.addEventListener('click', () =>{
        navMenu.classList.add('show-menu')
    })
}

/*===== MENU HIDDEN =====*/
/* Validate if constant exists */
if(navClose){
    navClose.addEventListener('click', () =>{
        navMenu.classList.remove('show-menu')
    })
}


/*=============== SERVICES MODAL ===============*/
const modalViews = document.querySelectorAll('.services__modal'),
      modalBtns = document.querySelectorAll('.services__button'),
      modalClose = document.querySelectorAll('.services__modal-close')

let modal = function(modalClick){
    modalViews[modalClick].classList.add('active-modal')
}

modalBtns.forEach((mb, i) =>{
    mb.addEventListener('click', () =>{
        modal(i)
    })
})

modalClose.forEach((mc) =>{
    mc.addEventListener('click', () =>{
        modalViews.forEach((mv) =>{
            mv.classList.remove('active-modal')
        })
    })
})



/*=============== REMOVE MENU MOBILE ===============*/
const navLink = document.querySelectorAll('.nav__link')

function linkAction(){
    const navMenu = document.getElementById('nav-menu')
    // When we click on each nav__link, we remove the show-menu class
    navMenu.classList.remove('show-menu')
}
navLink.forEach(n => n.addEventListener('click', linkAction))

/*=============== GSAP ANIMATION ===============*/
TweenMax.from('.home__title', 1, {delay: .2, opacity: 0, y: 20,ease: Expo.easeInOut})
TweenMax.from('.home__description', 1, {delay: .3, opacity: 0, y: 20,ease: Expo.easeInOut})
TweenMax.from('.home__button', 1, {delay: .4, opacity: 0, y: 20,ease: Expo.easeInOut})
TweenMax.from('.home__liquid', 1, {delay: .7, opacity: 0, y: 200,ease: Expo.easeInOut})
TweenMax.from('.home__juice-animate', 1, {delay: 1.2, opacity: 0, y: -800,ease: Expo.easeInOut})
TweenMax.from('.home__apple1', 1, {delay: 1.5,opacity: 0,y: -800,ease: Expo.easeInOut})
TweenMax.from('.home__apple2', 1, {delay: 1.6,opacity: 0,y: -800,ease: Expo.easeInOut})
TweenMax.from('.home__leaf:nth-child(1)', 2, {delay: 1.3,opacity: 0,y: -800,ease: Expo.easeInOut})
TweenMax.from('.home__leaf:nth-child(2)', 2, {delay: 1.4,opacity: 0,y: -800,ease: Expo.easeInOut})
TweenMax.from('.home__leaf:nth-child(3)', 2, {delay: 1.5,opacity: 0,y: -800,ease: Expo.easeInOut})
TweenMax.from('.home__leaf:nth-child(4)', 2, {delay: 1.6,opacity: 0,y: -800,ease: Expo.easeInOut})
TweenMax.from('.home__leaf:nth-child(5)', 2, {delay: 1.7,opacity: 0,y: -800,ease: Expo.easeInOut})
TweenMax.from('.home__leaf:nth-child(6)', 2, {delay: 1.8,opacity: 0,y: -800,ease: Expo.easeInOut})
.container {
  max-width: 1024px;
  margin-right: 1.5rem;
  margin-left: 1.5rem;
}
.slick-slide {
  margin: 0px 30px;
}

.slick-slide img {
  width: 100%;

}

.slick-list {
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
cursor: pointer;
cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);

}

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
}

.slick-track:before,
.slick-track:after {
  display: table;
  content: '';
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}

[dir='rtl'] .slick-slide {
float: right;
}

.slick-slide img{
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.slick-list.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
       
        <!--=============== FAVICON ===============-->

        <!--=============== REMIXICONS ===============-->
        <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">

        <!--=============== BOXICONS ===============-->
        <link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
        
        <!--=============== CSS ===============-->
        <link rel="stylesheet" href="assets/css/styles.css">
        <link rel="stylesheet" href="assets/css/scroll_nav.css">

       
        

        <meta name="theme-color" content="hsl(196, 60%, 91%)">
        
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="yes">



    </head>
    <body>

        <div id="pageloader"></div>


        <!--==================== HEADER ====================-->
        

        <!--==================== MAIN ====================-->
        <main class="main">

            <!--==================== HOME ====================-->
           
<!--=============== End of Home ===============-->



<!--==================== ABOUT ====================-->





<!--=============== Partners ===============-->

<div class="container">
    <h2 class="section__title">Clients We Work With</h2>
        <section class="partners-logos slider">
                        

            <div class="slide"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/Original_Adidas_logo.svg/779px-Original_Adidas_logo.svg.png" alt=""></div> 
            <div class="slide"><img src="/assets/img/pinkflower-removebg-preview.png" alt=""></div> 
            <div class="slide"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/Original_Adidas_logo.svg/779px-Original_Adidas_logo.svg.png" alt=""></div>
            
            <div class="slide"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/Original_Adidas_logo.svg/779px-Original_Adidas_logo.svg.png" alt=""></div> 
            
            <div class="slide"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/Original_Adidas_logo.svg/779px-Original_Adidas_logo.svg.png" alt=""></div>
            
            <div class="slide"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/Original_Adidas_logo.svg/779px-Original_Adidas_logo.svg.png" alt=""></div>
            
            <div class="slide"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/Original_Adidas_logo.svg/779px-Original_Adidas_logo.svg.png" alt=""></div>
            
                
            
        </section>

</div>



<!--=============== SERVICES ===============-->

<!--=============== End of SERVICES ===============-->

<br/><br/><br/><br/><br/>


        </main>
        

        <script>
            var loader = document.getElementById("pageloader");
          
            window.addEventListener("load", function(){
              loader.style.display = "none";
            })
          </script>


     

        <!--=============== GSAP ===============-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>        

        
        <!--=============== MAIN JS ===============-->
        <script src="assets/js/main.js"></script>
        <script src="assets/js/script.js"></script>
        <script src="assets/js/scroll_nav.js"></script>
    </body>
</html>

slick.js jquery javascript css html
1 Answers

Give this a try. I dropped jQuery from the top of the DOM to the bottom, just above Slick. I also found that a class in your GSAP library is returning 'not found'. It's possible that library is throwing an error. If it is, then it could be preventing Slick from running at all.

/*=============== Partners Section ===============*/

$(document).ready(function() {
  $('.partners-logos').slick({
    slidesToShow: 6,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 1500,
    arrows: false,
    dots: false,
    pauseOnHover: false,
    responsive: [{
      breakpoints: 768,
      settings: {
        slidesToShow: 4
      }
    }, {
      breakpoints: 520,
      settings: {
        slidesToShow: 3
      }
    }]
  });
});




/*=============== SHOW MENU ===============*/
const navMenu = document.getElementById('nav-menu'),
  navToggle = document.getElementById('nav-toggle'),
  navClose = document.getElementById('nav-close')

/*===== MENU SHOW =====*/
/* Validate if constant exists */
if (navToggle) {
  navToggle.addEventListener('click', () => {
    navMenu.classList.add('show-menu')
  })
}

/*===== MENU HIDDEN =====*/
/* Validate if constant exists */
if (navClose) {
  navClose.addEventListener('click', () => {
    navMenu.classList.remove('show-menu')
  })
}


/*=============== SERVICES MODAL ===============*/
const modalViews = document.querySelectorAll('.services__modal'),
  modalBtns = document.querySelectorAll('.services__button'),
  modalClose = document.querySelectorAll('.services__modal-close')

let modal = function(modalClick) {
  modalViews[modalClick].classList.add('active-modal')
}

modalBtns.forEach((mb, i) => {
  mb.addEventListener('click', () => {
    modal(i)
  })
})

modalClose.forEach((mc) => {
  mc.addEventListener('click', () => {
    modalViews.forEach((mv) => {
      mv.classList.remove('active-modal')
    })
  })
})



/*=============== REMOVE MENU MOBILE ===============*/
const navLink = document.querySelectorAll('.nav__link')

function linkAction() {
  const navMenu = document.getElementById('nav-menu')
  // When we click on each nav__link, we remove the show-menu class
  navMenu.classList.remove('show-menu')
}
navLink.forEach(n => n.addEventListener('click', linkAction))

/*=============== GSAP ANIMATION ===============
TweenMax.from('.home__title', 1, {
  delay: .2,
  opacity: 0,
  y: 20,
  ease: Expo.easeInOut
})
TweenMax.from('.home__description', 1, {
  delay: .3,
  opacity: 0,
  y: 20,
  ease: Expo.easeInOut
})
TweenMax.from('.home__button', 1, {
  delay: .4,
  opacity: 0,
  y: 20,
  ease: Expo.easeInOut
})
TweenMax.from('.home__liquid', 1, {
  delay: .7,
  opacity: 0,
  y: 200,
  ease: Expo.easeInOut
})
TweenMax.from('.home__juice-animate', 1, {
  delay: 1.2,
  opacity: 0,
  y: -800,
  ease: Expo.easeInOut
})
TweenMax.from('.home__apple1', 1, {
  delay: 1.5,
  opacity: 0,
  y: -800,
  ease: Expo.easeInOut
})
TweenMax.from('.home__apple2', 1, {
  delay: 1.6,
  opacity: 0,
  y: -800,
  ease: Expo.easeInOut
})
TweenMax.from('.home__leaf:nth-child(1)', 2, {
  delay: 1.3,
  opacity: 0,
  y: -800,
  ease: Expo.easeInOut
})
TweenMax.from('.home__leaf:nth-child(2)', 2, {
  delay: 1.4,
  opacity: 0,
  y: -800,
  ease: Expo.easeInOut
})
TweenMax.from('.home__leaf:nth-child(3)', 2, {
  delay: 1.5,
  opacity: 0,
  y: -800,
  ease: Expo.easeInOut
})
TweenMax.from('.home__leaf:nth-child(4)', 2, {
  delay: 1.6,
  opacity: 0,
  y: -800,
  ease: Expo.easeInOut
})
TweenMax.from('.home__leaf:nth-child(5)', 2, {
  delay: 1.7,
  opacity: 0,
  y: -800,
  ease: Expo.easeInOut
})
TweenMax.from('.home__leaf:nth-child(6)', 2, {
  delay: 1.8,
  opacity: 0,
  y: -800,
  ease: Expo.easeInOut
}) */
.container {
  max-width: 1024px;
  margin-right: 1.5rem;
  margin-left: 1.5rem;
}

.slick-slide {
  margin: 0px 30px;
}

.slick-slide img {
  width: 100%;
}

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
}

.slick-track:before,
.slick-track:after {
  display: table;
  content: '';
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}

[dir='rtl'] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.slick-list.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
  <link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
  <link rel="stylesheet" href="assets/css/styles.css">
  <link rel="stylesheet" href="assets/css/scroll_nav.css">

  <meta name="theme-color" content="hsl(196, 60%, 91%)">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="yes">
</head>

<body>

  <div id="pageloader"></div>


  <!--==================== HEADER ====================-->


  <!--==================== MAIN ====================-->
  <main class="main">

    <!--==================== HOME ====================-->

    <!--=============== End of Home ===============-->



    <!--==================== ABOUT ====================-->





    <!--=============== Partners ===============-->

    <div class="container">
      <h2 class="section__title">Clients We Work With</h2>
      <section class="partners-logos slider">


        <div class="slide"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/Original_Adidas_logo.svg/779px-Original_Adidas_logo.svg.png" alt=""></div>
        <div class="slide"><img src="/assets/img/pinkflower-removebg-preview.png" alt=""></div>
        <div class="slide"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/Original_Adidas_logo.svg/779px-Original_Adidas_logo.svg.png" alt=""></div>

        <div class="slide"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/Original_Adidas_logo.svg/779px-Original_Adidas_logo.svg.png" alt=""></div>

        <div class="slide"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/Original_Adidas_logo.svg/779px-Original_Adidas_logo.svg.png" alt=""></div>

        <div class="slide"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/Original_Adidas_logo.svg/779px-Original_Adidas_logo.svg.png" alt=""></div>

        <div class="slide"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/Original_Adidas_logo.svg/779px-Original_Adidas_logo.svg.png" alt=""></div>



      </section>

    </div>



    <!--=============== SERVICES ===============-->

    <br/><br/><br/><br/><br/>


  </main>


  <script>
    var loader = document.getElementById("pageloader");

    window.addEventListener("load", function() {
      loader.style.display = "none";
    })
  </script>




  <!--=============== GSAP ===============-->
 <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>


  <!--=============== MAIN JS ===============-->
  <script src="assets/js/main.js"></script>
  <script src="assets/js/script.js"></script>
  <script src="assets/js/scroll_nav.js"></script>
</body>

</html>

Millhorn0
Related