Basic Schwifty Slick Slider

basic-schwifty-slick-slider.markdown

Basic Schwifty Slick Slider

A Pen by Zlerp on CodePen.

License.

index.html

<div class="container h-100 d-flex flex-column justify-content-center">



    <!--   SLICK SLIDER -->
    <div class="slick-slider">
        <div class="slick-slider_item">
            <!-- I LIKE TO USE DIVS TO MAKE MY IMAGES RATIO MATCH PERFECT REGARDLESS THE IMAGE SIZE -->
            <div class="slick-slider_item_img" style="background: url(https://i.cdn.turner.com/adultswim/big/video/shrinking-showdown/rickandmorty_ep310_001_Shrinking_In_Brazil.jpg)no-repeat center center;background-size: cover;">
          </div>
        </div>
        <div class="slick-slider_item">
            <div class="slick-slider_item_img" style="background: url(https://m.media-amazon.com/images/M/MV5BZWIxYjU4NmItZWE4NC00ZDI1LWIxYzgtMDMwZTQ0OTBhYTI3XkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_UX477_CR0,0,477,268_AL_.jpg)no-repeat center center;background-size: cover;">
                       <!-- example of writing in a block -->
              <div class="text-block">
                This is a text block
              </div>
          </div>
        </div>
        <div class="slick-slider_item">
            <div class="slick-slider_item_img" style="background: url(https://www.geek.com/wp-content/uploads/2016/05/rickandmorty-2-625x350.jpg)no-repeat center center;background-size: cover;"></div>
        </div>
        <div class="slick-slider_item">
            <div class="slick-slider_item_img" style="background: url(https://nerdist.com/wp-content/uploads/2016/06/Rick-and-Morty-Portal.jpg)no-repeat center center;background-size: cover;"></div>
        </div>
        <div class="slick-slider_item">
            <div class="slick-slider_item_img" style="background: url(https://nerdist.com/wp-content/uploads/2018/03/rick-and-morty-run-the-jewels-970x545.jpg)no-repeat center center;background-size: cover;"></div>
        </div>
        <div class="slick-slider_item">
            <div class="slick-slider_item_img" style="background: url(https://cdn3.digitalartsonline.co.uk/cmsdata/slideshow/3652838/rick-and-morty-art.jpg)no-repeat center center;background-size: cover;">
          </div>
        </div>
        <div class="slick-slider_item">
            <div class="slick-slider_item_img" style="background: url(https://pmcvariety.files.wordpress.com/2017/10/rickandmorty.jpg?w=1000)no-repeat center center;background-size: cover;"></div>
        </div>
        <div class="slick-slider_item">
            <div class="slick-slider_item_img" style="background: url(http://thoughtforyourpenny.com/wp-content/uploads/Rick-and-Morty-S02E06-The-Ricks-Must-Be-Crazy-Peace-Among-Worlds.png)no-repeat center center;background-size: cover;"></div>
        </div>
        <div class="slick-slider_item">
            <div class="slick-slider_item_img" style="background: url(https://cdn-images-1.medium.com/max/1600/1*uyH-s_kUofX3jUegQEF2Eg.jpeg)no-repeat center center;background-size: cover;"></div>
        </div>
        <div class="slick-slider_item">
            <div class="slick-slider_item_img" style="background: url(https://pmcdeadline2.files.wordpress.com/2017/07/rickmorty1.png?w=605)no-repeat center center;background-size: cover;"></div>
        </div>
        <div class="slick-slider_item">
            <div class="slick-slider_item_img" style="background: url(https://static1.srcdn.com/wordpress/wp-content/uploads/2017/04/Rick-and-Morty-Quiz-Ants-In-My-Eyes-Johnson.jpg)no-repeat center center;background-size: cover;"></div>
        </div>
    </div>
    <!--   END SLICK SLIDER -->


</div>

<div class="logo">
  <img src="https://image.ibb.co/hTQdUF/Rick_and_Morty_logo.png" alt="Rick and Morty Logo">
</div>

<div class="characters">
  <img id="rick" src="https://image.ibb.co/fyxspF/rick.png" alt="Rick Sanchez">
  <img id="morty" src="https://image.ibb.co/g2459F/morty.png" alt="Morty Smith">
</div>

script.js

$('.slick-slider').slick({
  infinite: true,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  nextArrow: '<button type="button" class="slick-next"><i class="fa fa-arrow-right"></i></button>',
  prevArrow: '<button type="button" class="slick-prev"><i class="fa fa-arrow-left"></i></button>',
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

style.scss

.slick-slider {
  position: relative;
  .slick-slider_item {
    display: flex;
    padding: 5px;
    outline: none!important;
    .slick-slider_item_img {
      padding-top: 75%;
      width: 100%;   
      position: relative;
      
      .text-block {
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        color: white;
        padding: 0.5rem;
      }
    }
  }
  .slick-arrow {
    background-color: transparent;
    border: solid 3px #000;
    position: absolute;
    z-index: 10;
    cursor: pointer;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    transform-origin: 50% 50%;
    color: black;
    background-color: #fff;
    border-radius: 50%;
    left: -33px;
    outline: none;
    transition: all 0.3s;
 
  }
  .slick-next {
    left: auto;
    right: -33px;
  }
}

// THIS MEDIA QUERY IS SPECIFIC TO BOOTSTRAP SIZES
@media (max-width: 575px) {
  .slick-slider {
    .slick-arrow {
      left: 5px;
    }
    .slick-next {
      left: auto;
      right: 5px;
    }
  }
}
@media (max-width: 480px) {
  .slick-slider {
    .slick-slider_item {
      padding: 0;
    }
  }
}

// EXTRA BULLSHIT
body {
  background: url(https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/moving-through-stars-in-space_-1zccenlb__F0000.png);
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
  overflow: hidden;
}


.slick-slider:after {
  content:"";
  position:absolute;
  width:100%;
  bottom:1px;
  z-index:-1;
  transform:scale(0.97);
  box-shadow: 0px -2px 12px 4px #000000;
}
.logo  {
  position: absolute;
  top: 2rem;
  z-index: -2;
  left: 50%;
  transform: translateX(-50%);
  max-width: 80%;
  img {
    max-width: 100%;
  }

}

#rick {
  position: absolute;
  left: 0;
  transform: translate(-30%, 10%) scale(0.8);
  bottom: 0;
  z-index: -2;
  opacity: 0.9;
  width: 50vw;
  min-width: 500px;
}

#morty {
  position: absolute;
  bottom: 0;
  z-index: -2;
  opacity: 0.9;
  transform: scaleX(-1) translate(-30%, 30%);
  right: 0;
  width: 30vw;
  min-width: 300px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https:////cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />