3주차 퍼블리싱 개발일지

https://swiperjs.com/demos

Swiper Demos

 

.shop_wrap .list_goods_wrap .goods_area img {

  -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);

  transition: -webkit-transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);

  transition: transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);

  transition: transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1),

    -webkit-transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);

  image-rendering: -webkit-optimize-contrast;

}

 

 

/* custom swiper-pagination */

.shop_wrap .shop_page .num_box .swiper-pagination {

  width: initial;

  position: initial;

  text-align: inherit;

  transition: initial;

  transform: initial;

  z-index: initial;

}

// swiper 객체 사용

const createSwiper = () => {

  shoppingSwiper = new Swiper(".mySwiper", {

    observer: true,  // display:none 에러 막기위해 사용 

    observeParents: true,  // display:none 에러 막기위해 사용 

    loop: true,

    spaceBetween: 15,

    navigation: {

      nextEl: "#contents_productAd .btn_next",

      prevEl: "#contents_productAd .btn_prev",

    },

    // 참고

    // https://stackoverflow.com/questions/32196177/showing-number-of-slides-on-the-web-page

    pagination: {

      el: ".swiper-pagination",

      renderFraction: function (currentClass, totalClass) {

        return `

        <em class="current">

          <span class="blind">현재</span><span class="${currentClass}"></span>

        </em>

        <span class="blind">전체</span>/ <span class="${totalClass}"></span>

      `;

      },

      type: "fraction",

    },

  });

};

 

// 탭스크립트

<script>

      $('.tab-link').click(function () {

        var tab_id = $(this).attr('data-type');

        $('.tab-link').removeClass('on');

        $('.tab-content').removeClass('on');

        $(this).addClass('on');

        $('#' + tab_id).addClass('on');

      });

    </script>