integrate Slick slider to my project

Asked

Viewed 46 times

0

I’m trying to integrate Slick into my project Django but it seems that it doesn’t work at all, if you can help me by telling me what I’m missing, it would help me a lot, I’ll put the base code and how I’m using it.

html base.

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{% endblock %}</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
    <link rel="stylesheet" href="{% static 'css/styles.css'%}">
</head>
<body>
    <div class="container-fluid">
        {% block content %}
        {% endblock %}
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js" integrity="sha384-LtrjvnR4Twt/qOuYxE721u19sVFLVSA4hf/rRt6PrZTmiPltdZcI7q7PXQBYTKyf" crossorigin="anonymous"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="slick/slick.min.js"></script>
    <script src="{% static 'js/scripts.js' %}"></script>
</body>
</html>

HTML

<main class="fundo">
  <div class="fundo-card">
    <div class="fundo-card-img">
      <img src="https://i.pinimg.com/564x/a4/fb/72/a4fb72a710c9322b2ac90f9e329d2f2d.jpg" alt="">
      <img src="https://i.pinimg.com/564x/80/9d/d7/809dd7a916407c1a6a08f4d5ecbc2e45.jpg" alt="">
      <img src="https://i.pinimg.com/564x/77/45/9f/77459fcc5a6c9c928b4c537052b22dda.jpg" alt="">
      <img src="https://i.pinimg.com/564x/98/5f/23/985f2360500626ec119126328f5958b5.jpg" alt="">
    </div>
  </div> 
</main>

CSS

.fundo {
    background-color: #f0f0f0;
    padding: 3vw;
    height: 100%;
    display: flex;
    justify-content:center;
}

.fundo .fundo-card {
    width: 35vw; 
    height: 53vw;
    max-height: 75vh;
    max-width: 50vh;
    margin: 3vw;
    border-radius: 20px;
    padding: 0.7vw;
    background-color: #c4c4c4;
    display: inline-flex;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    justify-content: center;
}

.fundo .fundo-card .fundo-card-img{
  width: 90vw; 
  height: 85%;
  border-radius: 20px;
  background-color: #c26969;
  display: inline-block;
  overflow: hidden;
  position: static;
}

JS

$(function(){
  $('.fundo-card-img').slick({

  });
})

I use the CDN to bring Slick into the project, but it doesn’t make any changes, as if the code I put in doesn’t exist. I don’t know if it’s bug or if I’m wrong in the order of things, I’m beginner and I have a lot to learn yet.

javascript html css django

1 answer

0


If you are not passing any config you do not need {} as argument. But maybe it’s not the problem, I think you need each element to be inside a div.

Here a codepen (not mine) example: https://codepen.io/elethompson/pen/GpXXXW

  • Thank you Ricardo, you helped so much, now I can continue!

Browser other questions tagged javascript html css django

You are not signed in. Login or sign up in order to post.