サポート » 使い方全般 » コンテンツスライダーの実装

  • 解決済 taktaktaktak

    (@taktaktaktak)


    以下サイトのようなスライダーを実装したいと考えています。
    http://www.smbc.co.jp/

    一番重視したい機能部分は、「カラーセル」といいのでしょうか?
    横幅一杯に表示され、左、中央、右にスライド配置されている状態です。

    ここまで、10時間位かけてプラグインをひとつひとつ試しているところなのですが、なかなか希望どおりの実装ができるものにたどり着けません。

    スライダープラグイン自体を使うのが始めてで、とても時間がかかっています。
    この調子だと全部調べるのに20〜30時間位かかってしまいそうです。

    何時間もけて、「プラグインでは実現できないことがわかった」というのも避けたいので、
    どなたか、お詳しい方、お知恵をかしてください。

    ・Meta Slider
    ➝スライダーが4種類しかないようで、希望のスライダーは実現できず。

    ・Smart Slider 3
    ➝まだ全部の機能を把握しきれていない。無料機能の範囲ではできなさそう。有料版ならできるかも?

    ・Responsive Slider – Image Slider – Slideshow for WordPress
    ➝インストール済。未調査

    ・Slider by WD – Responsive Slider for WordPress
    ➝インストール済。未調査

    ・Master-slider
    ➝インストール済。未調査

    よろしくお願いします。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • Gabor

    (@nextendweb_gabor)

    Hi @taktaktaktak!

    The closest we have to that is the Showcase slider type, what you can see here:
    https://smartslider3.com/product-slider-woocommerce/#productshowcase
    which is only available in the pro version of our slider. You could check that out in our backend here too: https://smartslider3.com/try
    where you could import that slider:
    https://smartslider3.helpscoutdocs.com/article/1143-add-sample-slider#pro

    トピック投稿者 taktaktaktak

    (@taktaktaktak)

    Thanks.
    Can not you for free?

    Gabor

    (@nextendweb_gabor)

    I’m sorry, but with the free version you couldn’t create that kind of slider. If you check out these:
    https://smartslider3.com/tag/free/
    you can see some examples you could do with the free. You can import those sliders as well.

    Honda

    (@rocketmartue)

    私も全てのプラグインを試したわけではないので断言はできませんが、このタイプのスライダーは、プラグインでは難しいかもしれません。
    画像ウィジェットを利用して、bxSlider を実装するのが手っ取り早い気がします。
    http://bxslider.com/

    functions.php

    /**
     * Enqueue scripts and styles.
     */
    function my_slide_scripts() {
    
        wp_enqueue_style( 'bxslider-style', get_theme_file_uri('/bxslider/jquery.bxslider.min.css'));
        wp_enqueue_script( 'bxslider', get_theme_file_uri('/bxslider/jquery.bxslider.min.js'), array( 'jquery' ), '', true );
        wp_enqueue_script( 'my_scripts', get_theme_file_uri(/js/my_script.js), array(), '', true );
    
    }
    add_action( 'wp_enqueue_scripts', 'my_slide_scripts' );
    
    /**
     * Register widget area.
     *
     * @link http://codex.wordpress.org/Function_Reference/register_sidebar
     */
    function my_slide_widgets_init() {
        register_sidebar( array(
            'name'          => esc_html__( 'Slider', 'theme_text_domain' ),
            'id'            => 'slider',
            'description'   => '',
            'before_widget' => '<li id="%1$s" class="top_slide %2$s">',
            'after_widget'  => '</li>',
            'before_title'  => '<h4 class="slider-title screen-reader-text">',
            'after_title'   => '</h4>'
    	) );
    }
    add_action( 'widgets_init', 'my_slide_widgets_init' );

    my_script.js

    jQuery(function($){
        $('.bxslider').bxSlider();
    });

    option を指定する場合 http://bxslider.com/options

    jQuery(function($){
        $('.bxslider').bxSlider({
            // オプションを記入 
            pager: false,
            slideMargin: 10,
            slideWidth: 960,
        });
    });

    スライダーの表示

    <ul class="bxslider">
        <?php dynamic_sidebar( 'slider' ); ?>
    </ul>

    CSSに以下を追記すれば、3枚並びで表示されます。

    .bx-viewport {
      overflow: visible !important;
    }
    CG

    (@du-bist-der-lenz)

    目標としている三井住友銀行も同じくbxSlider を実装して実現しているのではないでしょうか。

    トピック投稿者 taktaktaktak

    (@taktaktaktak)

    Toshiyuki Honda さん 具体的なコード例までありがとうございます!
    ためしてみます。

    トピック投稿者 taktaktaktak

    (@taktaktaktak)

    CG さん
    回答ありがとうございます。「bxSlider」使ってみます。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • トピック「コンテンツスライダーの実装」には新たに返信することはできません。