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
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.
私も全てのプラグインを試したわけではないので断言はできませんが、このタイプのスライダーは、プラグインでは難しいかもしれません。
画像ウィジェットを利用して、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 を実装して実現しているのではないでしょうか。
Toshiyuki Honda さん 具体的なコード例までありがとうございます!
ためしてみます。
CG さん
回答ありがとうございます。「bxSlider」使ってみます。