django slick 사용하기

베토디·2022년 3월 15일
0

{% block css %}는 부분에
{% block js %}는 안에 있음

*css파일 넣는 부분에 두개 넣기

{% block css %}
    <!-- 메인슬릭 -->
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
{% endblock %}

*javascript파일 넣는 부분에 추가

{% block js %}
    <!-- 메인슬릭 -->
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
    <script type="text/javascript">
        $('.main_top').slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            infinite: true,
            autoplay: true,
            autoplaySpeed: 3000,
          });
    </script>
{% endblock %}
  

*슬라이드로 보여줄 이미지 박스

{% block content %}
메인슬릭
    <div class="main_top">
        <div class="slick_imgs">
            <img src="{% static '/img/main_1.jpg' %}">
        </div>
        <div class="slick_imgs">
            <img src="{% static '/img/main_2.jpg' %}">
        </div>
    </div>
{% endblock %}

*완성!

profile
오늘 점심 뭐 먹지

0개의 댓글