スライドバナーについて

Question

お世話になります。

ショップサーブで自社サイトを運営しておりまして、
ページのリニューアルを進めている中で
スライドバナーを作成しましたが、見づらいと意見がありました。

他社さんのページを確認する中でこちらのページのスライドバナーが
見やすいと思いました。

こちらのスライドバナーを自社サイトに取り入れることは可能でしょうか。
可能でしたら挿入するＨＴＭＬ教えて頂けますでしょうか。

ご確認を宜しくお願い致します。


自社サイト
https://www.la-floraison.com/

見やすいサイト
https://net-fine.com/

Accepted Answer

ECマスターズの伊藤です。

> こちらのスライドバナーを自社サイトに取り入れることは可能でしょうか。
> 可能でしたら挿入するＨＴＭＬ教えて頂けますでしょうか。

自社サイトであれば、HTMLに制限がございませんので
自由に記述いただけます。

参考に頂いたサイトでも
bxsliderを、ご利用頂いていましたが、
読み込むソースのバージョンが一部異なるため、

現在のものを一度削除いただき、
下記の通り、設置いただきご対応をお願いいたします。

デザインの細かい部分につきましては、
CSSにて、ご希望のデザインに、修正をお願いいたします。

  
内に以下を記述==========




内に以下を記述==========
  
    .bxslider {
      position: relative;
    }

    .bxslider ul {
      opacity: 0;
    }

    .bxslider a {
      transition: 0.4s;
    }

    .bxslider .bx-pager {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 0px;
      text-align: center;
      display: flex;
      justify-content: center;
    }

    .bxslider .bx-pager-item {
      display: none;
    }

    .bxslider .bx-pager-item a {
      background: rgba(0, 0, 0, 1);
      display: inline-block;
      width: 10px;
      height: 10px;
      text-indent: -200%;
      overflow: hidden;
      border-radius: 50%;
    }

    .bxslider .bx-pager-item a:hover {
      background: rgba(0, 0, 0, 0.6);
    }

    .bxslider .bx-pager-item a.active {
      background: rgba(160, 160, 160, 1);
    }

    .bxslider .bx-controls-direction {
      position: absolute;
      top: 50%;
      left: 0;
      margin-top: -1em;
      width: 100%;
      height: 0px;
    }

    .bxslider .bx-controls-direction a {
      width: 40px;
      height: 40px;
      display: block;
      background: rgba(0, 0, 0, 0.8);
      position: relative;
      text-indent: -100%;
      overflow: hidden;
      border-radius: 50%;
    }

    .bxslider .bx-controls-direction a:hover {
      background: rgba(0, 0, 0, 0.4);
    }

    .bxslider .bx-controls-direction a:before,
    .bxslider .bx-controls-direction a:after {
      content: '';
      position: absolute;
      top: 12px;
      left: 8px;
    }

    .bxslider .bx-controls-direction a:after {
      width: 16px;
      height: 16px;
      border-top: 1px solid #fff;
      border-right: 1px solid #fff;
      transform: rotate(45deg);
    }

    .bxslider .bx-controls-direction a.bx-prev:after {
      transform: rotate(-135deg);
      left: 16px;
    }

    .bxslider .bx-prev {
      float: left;
      left: 0;
    }

    .bxslider .bx-next {
      float: right;
      right: 0;
    }

    .bxslider_box {
      overflow: hidden;
    }

    .bxslider_box .bxslider {
      max-width: 670px;
      width: 100%;
      height: 450px;
      margin: 0 auto;
    }

    .bxslider_box ul li {
      width: 670px;
      max-width: 100%;
      height: 450px;
    }

    .bxslider_box ul li img {
      width: 100%;
      height: auto;
    }

    .bxslider_box .bx-viewport {
      overflow: visible !important;
    }
  

  
    (function ($) {
      $(window).on('load', function () {
        //横幅いっぱい
        var $slide = $('.bxslider_box');
        var $slide_ul = $slide.find('.bxslider > ul');
        var n = $slide_ul.children('li').size();
        $slide_ul.bxSlider({
          infiniteLoop: true,
          auto: true,
          maxSlides: 2,
          easing: 'easeOutExpo',
          speed: 800,
          pause: 2000,
          onSliderLoad: function () {
            $slide.find('.bx-viewport > ul').css({
              width: n * 100 + 415 + '%'
            });
            $slide_ul.animate({
              opacity: 1
            }, 500);
          }
        }
        );
      });
    })(jQuery);

Answer

ありがとうございます。
確認してみます。