Простой слайдер bxslider для WordPress

Когда нужно сделать простой слайдер фотографий или слайдер текста. То можно применить bxslider.

При вставке стандартной галереи в Wordpres на страницу, из этих картинок можно сделать слайдер, если подключить bxslider. Подключается он очень просто. Достаточно прописать код в шапке или футере сайта.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>

/* инициализация самого слайдера */
<script>
    jQuery(document).ready(function(){
      jQuery('.gallery').bxSlider({
        auto: true,
        controls: false,
        slideWidth: 400 
      });

    });
    
  </script>

/* инициализация самого слайдера */

jQuery(document).ready(function(){

jQuery('.gallery').bxSlider({

auto: true,

controls: false,

slideWidth: 400

});

</script>

.gallery — это блок с классом gallery внутри которого идут картинки или блоки с контентом.

<div class="gallery">
	<div>Контент или картинка 1</div>
	<div>Контент или картинка 2</div>
	<div>Контент или картинка 3</div>
	<div>Контент или картинка 4</div>
</div>

или шорткод стандартной галереи WordPress

<div>Контент или картинка 1</div>

<div>Контент или картинка 2</div>

<div>Контент или картинка 3</div>

<div>Контент или картинка 4</div>

</div>

или шорткод стандартной галереи WordPress

: Toyota Wish 2007 — без салона

: Toyota Wish 2007 — направляющие крыши

: Toyota Wish 2007 — направляющие крыши

Опции слайдера можно посмотреть на сайте https://bxslider.com/options/.

Рекомендуем еще эти статьи

27.05.2021

Фильтр записей в Oxygen с помощью ISOTOPE

На одном из проектов, необходимо было реализовать фотогалерею по разделам. Она была реализована с помощью...

15.08.2019

Простое всплывающее окно на сайте

На сайте часто нужно вывести информацию в шапке о режиме работы или контактах. Чтобы не...

08.03.2020

«Развернуть» дамп базы через SSH консоль

Восстановить базу данных из дампа можно несколькими способами, это и через панель хостинга, и через...

19.12.2019

Отключить редактор блоков Гутенберг

В файле functions.php прописываем следующий код:

// отключим Гутенберг
if( 'disable_gutenberg' ){
	add_filter( 'use_block_editor_for_post_type', '__return_false', 100 );
	remove_action( 'wp_enqueue_scripts', 'wp_common_block_scripts_and_styles' );
	add_action( 'admin_init', function(){
		remove_action( 'admin_notices', [ 'WP_Privacy_Policy_Content', 'notice' ] );
		add_action( 'edit_form_after_title', [ 'WP_Privacy_Policy_Content', 'notice' ] );
	} );
}

// отключим Гутенберг

if( 'disable_gutenberg' ){

add_filter( 'use_block_editor_for_post_type', '__return_false', 100 );

remove_action( 'wp_enqueue_scripts', 'wp_common_block_scripts_and_styles' );

add_action( 'admin_init', function(){

remove_action( 'admin_notices', [ 'WP_Privacy_Policy_Content', 'notice' ] );

add_action( 'edit_form_after_title', [ 'WP_Privacy_Policy_Content', 'notice' ] );

} );

}

15.06.2022

Красивый скроллбар (scrollbar)

Чтобы на сайте сделать современный, красивый скроллбар (он же scrollbar) необходимо минимум кода CSS. Меняя...

16.03.2021

Геотаргетинг — определение и переключение городов на сайте

Понадобилось на одном сайте, на WordPress сделать переключение городов и разный контент для каждого города....