slider – devfrontend.info

Le but de ce billet n’est pas de donner une solution toute faite mais plutôt une méthode pour étendre rapidement et efficacement les fonctionnalités de n’importe que plug-in jQuery de slider.

HTML

On crée un container dans lequel on place une balise <img> aux attributs non renseignés. Cette balise va servir à accueillir l’image « en cours ».

<!-- Full-page carousel -->
<div id="fullPageCarousel" class="full-page-carousel is-image">
    <img src="" alt="" />
</div>

</div>

jQuery avec la méthode Bind et l’événement DOMSubtreeModified

On crée une fonction qui surveille en temps réel quelle image du carousel est affichée (celle qui possède la plupart du temps une classe .current) et on stocke son URL dans une variable. On assigne ensuite le contenu de cette variable à l’attribut src de notre image en haut de page.

On exécute la fonction au chargement de la page, puis à chaque fois que le DOM relatif au carousel évolue (passage d’une slide à l’autre).

/*
 * full page Carousel
 */
// Use 'default' view of slick carousel
function switchImg(){
  var getActiveImgURL = $('#block-views-home-slider-block').find('.slick-current img').attr('src');
  $('#fullPageCarousel img').attr('src', '').attr('src', getActiveImgURL);
}
switchImg();
$('#block-views-home-slider-block').bind('DOMSubtreeModified', switchImg);

* full page Carousel

// Use 'default' view of slick carousel

function switchImg(){

var getActiveImgURL = $('#block-views-home-slider-block').find('.slick-current img').attr('src');

$('#fullPageCarousel img').attr('src', '').attr('src', getActiveImgURL);

}

switchImg();

$('#block-views-home-slider-block').bind('DOMSubtreeModified', switchImg);

Cas du Slick Carousel (Drupal 7)

Utiliser la méthode .bind() sur l’événement DOMSubtreeModified ne fonctionne pas dans le cas où un changement de slide utilise plusieurs événements. (En réalité,
ça fonctionne, mais le console.log() imprime plusieurs fois l’URL récupérée).

    /*
     * full page Carousel
     */
    // Use 'default' view of slick carousel
    function switchImg(slideIndex){
      if($('#block-views-home-slider-block').find('.slick-slide.slide--' + slideIndex +' img').length > 0){
        var getActiveImgURL = $('#block-views-home-slider-block').find('.slick-slide.slide--' + slideIndex +' img').first().attr('src');
        $('#fullPageCarousel img').attr('src', '').attr('src', getActiveImgURL);
      }
    }
    switchImg(0);
    jQuery(document).on('beforeChange', '#slick-views-home-slider-1-slider', function (event, slick, currentSlide, nextSlide) {
      switchImg(nextSlide);
    });

* full page Carousel

// Use 'default' view of slick carousel

function switchImg(slideIndex){

if($('#block-views-home-slider-block').find('.slick-slide.slide--' + slideIndex +' img').length > 0){

var getActiveImgURL = $('#block-views-home-slider-block').find('.slick-slide.slide--' + slideIndex +' img').first().attr('src');

$('#fullPageCarousel img').attr('src', '').attr('src', getActiveImgURL);

}

switchImg(0);

jQuery(document).on('beforeChange', '#slick-views-home-slider-1-slider', function (event, slick, currentSlide, nextSlide) {

switchImg(nextSlide);

});

SCSS

On masque les images par défaut du carousel. On met en place quelques styles pour afficher les visuels en pleine page et pour les caler en haut de la fenêtre.

//
// full page carousel
#block-views-home-slider-block {
  img {
    display: none;
  }
}
.full-page-carousel {
  &.is-image {
    img {
      position: absolute;
      z-index: -1;
      top: 0;
    }
  }
}

// full page carousel

#block-views-home-slider-block {

img {

display: none;

}

.full-page-carousel {

&.is-image {

img {

position: absolute;

z-index: -1;

top: 0;

}

Une alternative où l’image est placée en background-image de l’élément body

    /*
     * full page Carousel
     */
    // Use 'default' view of slick carousel
    function switchImg(slideIndex){
      if($('#block-views-home-slider-block').find('.slick-slide.slide--' + slideIndex +' .views-field-field-image img').length > 0){
        var getActiveImgURL = $('#block-views-home-slider-block').find('.slick-slide.slide--' + slideIndex +' .views-field-field-image img').first().attr('src');
        $('body')
          .attr('style', '')
          .css({
            'background-image': 'url("'+ getActiveImgURL +'")',
            'background-position': 'top center',
            'background-repeat': 'no-repeat'
          });
      }
    }
    switchImg(0);
    jQuery(document).on('beforeChange', '#slick-views-home-slider-1-slider', function (event, slick, currentSlide, nextSlide) {
      switchImg(nextSlide);
    });

* full page Carousel

// Use 'default' view of slick carousel

function switchImg(slideIndex){

if($('#block-views-home-slider-block').find('.slick-slide.slide--' + slideIndex +' .views-field-field-image img').length > 0){

var getActiveImgURL = $('#block-views-home-slider-block').find('.slick-slide.slide--' + slideIndex +' .views-field-field-image img').first().attr('src');

$('body')

.attr('style', '')

.css({

'background-image': 'url("'+ getActiveImgURL +'")',

'background-position': 'top center',

'background-repeat': 'no-repeat'

});

}

switchImg(0);

jQuery(document).on('beforeChange', '#slick-views-home-slider-1-slider', function (event, slick, currentSlide, nextSlide) {

switchImg(nextSlide);

});

Magento2 : How to disable product image slider on detail page. Dans /theme_folder/etc/view.xml :

<vars module="Magento_Catalog">

    <!-- Gallery and magnifier theme settings. Start -->
    <var name="gallery">
        <var name="nav">thumbs</var> <!-- Gallery navigation style (false/thumbs/dots) -->
        <var name="loop">true</var> <!-- Gallery navigation loop (true/false) -->
        <var name="keyboard">true</var> <!-- Turn on/off keyboard arrows navigation (true/false) -->
        <var name="arrows">true</var> <!-- Turn on/off arrows on the sides preview (true/false) -->
        <var name="caption">false</var> <!-- Display alt text as image title (true/false) -->
        <var name="allowfullscreen">true</var> <!-- Turn on/off fullscreen (true/false) -->
        <var name="navdir">horizontal</var> <!-- Sliding direction of thumbnails (horizontal/vertical) -->
        <var name="navarrows">true</var> <!-- Turn on/off on the thumbs navigation sides (true/false) -->
        <var name="navtype">slides</var> <!-- Sliding type of thumbnails (slides/thumbs) -->
        <var name="transition">
            <var name="effect">slide</var> <!-- Sets transition effect for slides changing (slide/crossfade/dissolve) -->
            <var name="duration">500</var> <!-- Sets transition duration in ms -->
        </var>
        <var name="fullscreen">
            <var name="nav">thumbs</var> <!-- Fullscreen navigation style (false/thumbs/dots) -->
            <var name="loop">true</var> <!-- Fullscreen navigation loop (true/false/null) -->
            <var name="keyboard">true</var> <!-- Turn on/off keyboard arrows navigation (true/false/null) -->
            <var name="arrows">false</var> <!-- Turn on/off arrows on the sides preview (true/false/null) -->
            <var name="caption">false</var> <!-- Display alt text as image title (true/false) -->
            <var name="navdir">horizontal</var> <!--Sliding direction of thumbnails in full screen(horizontal/vertical)  -->
            <var name="thumbwidth">150</var> <!-- Width of thumbnails in fullscreen -->
            <var name="thumbheight">150</var> <!-- Height of thumbnails in fullscreen -->
            <var name="navigation_carousel">true</var> <!-- Display navigation thumbs as carousel (true/false) -->
            <var name="transition">
                <var name="effect">dissolve</var> <!-- Sets transition effect for slides changing (slide/crossfade/dissolve) -->
                <var name="duration">500</var> <!-- Sets transition duration in ms -->
                <var name="carousel">true</var> <!-- Display navigation thumbs as carousel (true/false) -->
            </var>
        </var>
    </var>

<var name="nav">thumbs</var>

<var name="caption">false</var>

<var name="navdir">horizontal</var>

<var name="navtype">slides</var>

<var name="effect">slide</var>

</var>

<var name="nav">thumbs</var>

<var name="arrows">false</var>

<var name="caption">false</var>

<var name="navdir">horizontal</var>

<var name="effect">dissolve</var>

</var>

Articles récents

Catégories

Archives

Méta

Étiquette : slider

[jQuery] Un carousel avec visuel en pleine page avec n’importe quel plug-in

HTML

jQuery avec la méthode Bind et l’événement DOMSubtreeModified

Cas du Slick Carousel (Drupal 7)

SCSS

Une alternative où l’image est placée en background-image de l’élément body

[Magento 2.x] Les options du slider Fotorama natif