component

Slideshow

A full carousel component with arrows, dragging and dots control.

You can change the width of the slideshow by changing the --slideshow-max-width value. The slideshow height property is controlled by JavaScript. When it loads, the --slideshow-height variable is set to the active slideshow image height. This property is also use for other calculations like the top porperty of the arrows controls.

Basic usage

The default --slideshow-max-width variable is set to 780px:

<div class="slideshow"> <div class="slideshow__wrapper"> <!-- prev arrow --> <div data-dir="previous" class="slideshow__arrow slideshow__arrow--previous"> <i class="fa-solid fa-arrow-left"></i> </div> <div class="slideshow__inner"> <ul class="slideshow__content"> <li class="slideshow__item is-active"> <img src="https://images.unsplash.com/photo-1523867904486-8153c8afb94f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"> </li> <li class="slideshow__item"> <img src="https://images.unsplash.com/photo-1552039431-11d2a516d0d4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80"> </li> <li class="slideshow__item"> <img src="https://images.unsplash.com/photo-1535232843222-a40c29436fd3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1180&q=80"> </li> </ul> </div> <!-- controls --> <ul class="slideshow__control"> <li class="slideshow__control-item is-active"></li> <li class="slideshow__control-item"></li> <li class="slideshow__control-item"></li> </ul> <!-- next arrow --> <div data-dir="next" class="slideshow__arrow slideshow__arrow--next"> <i class="fa-solid fa-arrow-right"></i> </div> </div> </div>

If you need to show some ebooks, you can use the is-ebook-previewer modiffier on the slideshow main container. The --slideshow-max-width variable will be set to 340px:

<div class="slideshow is-ebook-previewer"> <div class="slideshow__wrapper"> <!-- prev arrow --> <div data-dir="previous" class="slideshow__arrow slideshow__arrow--previous"> <i class="fa-solid fa-arrow-left"></i> </div> <div class="slideshow__inner"> <ul class="slideshow__content"> <li class="slideshow__item is-active"> <img src="https://www.inboundcycle.com/hubfs/0-media/it/hs-tpl-ebook-viewer-cover.png"> </li> <li class="slideshow__item"> <img src="https://www.inboundcycle.com/hubfs/0-media/it/hs-tpl-ebook-viewer-cover.png"> </li> <li class="slideshow__item"> <img src="https://www.inboundcycle.com/hubfs/0-media/it/hs-tpl-ebook-viewer-cover.png"> </li> </ul> </div> <!-- controls --> <ul class="slideshow__control"> <li class="slideshow__control-item is-active"></li> <li class="slideshow__control-item"></li> <li class="slideshow__control-item"></li> </ul> <!-- next arrow --> <div data-dir="next" class="slideshow__arrow slideshow__arrow--next"> <i class="fa-solid fa-arrow-right"></i> </div> </div> </div>

You can combine it with captions:

<div class="slideshow caption"> <div class="slideshow__wrapper"> <!-- prev arrow --> <div data-dir="previous" class="slideshow__arrow slideshow__arrow--previous"> <i class="fa-solid fa-arrow-left"></i> </div> <div class="slideshow__inner"> <ul class="slideshow__content"> <li class="slideshow__item is-active"> <figure class="image rounded-none"> <img src="https://www.inboundcycle.com/hubfs/grow-for-it-1.jpg"> <figcaption class="is-fullwidth caption padding-x-sm has-text-center"> <p class="has-text-bold">Lorem ipsum dolor sit amet consectetur adipisicing elit</p> </figcaption> </figure> </li> <li class="slideshow__item"> <figure class="image rounded-none"> <img src="https://www.inboundcycle.com/hubfs/concious-leadership-1.jpg"> <figcaption class="is-fullwidth caption padding-x-sm has-text-center"> <p class="has-text-bold">Incidunt voluptas quia error quibusdam nulla, provident, voluptate maxime amet, aut illo velit commodi!</p> </figcaption> </figure> </li> <li class="slideshow__item"> <figure class="image rounded-none"> <img src="https://www.inboundcycle.com/hubfs/piece-in-a-puzzle.jpg"> <figcaption class="is-fullwidth caption padding-x-sm has-text-center"> <p class="has-text-bold">Cumque neque consequuntur voluptate facere nulla doloremque rerum.</p> </figcaption> </figure> </li> </ul> </div> <!-- controls --> <ul class="slideshow__control"> <li class="slideshow__control-item is-active"></li> <li class="slideshow__control-item"></li> <li class="slideshow__control-item"></li> </ul> <!-- next arrow --> <div data-dir="next" class="slideshow__arrow slideshow__arrow--next"> <i class="fa-solid fa-arrow-right"></i> </div> </div> <style> .slideshow.caption { --slideshow-max-width: 800px; } </style> </div>

You can set it up to full width by applying the is-fullwidth modiffier to it which will set the --slideshow-max-width variable to 100%.

<div class="slideshow is-fullwidth"> <div class="slideshow__wrapper"> <!-- prev arrow --> <div data-dir="previous" class="slideshow__arrow slideshow__arrow--previous"> <i class="fa-solid fa-arrow-left"></i> </div> <div class="slideshow__inner"> <ul class="slideshow__content"> <li class="slideshow__item is-active"> <img src="https://www.inboundcycle.com/hubfs/%C2%BFQu%C3%A9_es_la_indexaci%C3%B3n_web_o_indexar_un_contenido_y_c%C3%B3mo_hacerlo_.png"> </li> <li class="slideshow__item"> <img src="https://www.inboundcycle.com/hubfs/Qu%C3%A9_es_el_marketing_mix_y_cu%C3%A1les_son_sus_variables.png"> </li> <li class="slideshow__item"> <img src="https://www.inboundcycle.com/hubfs/%C2%BFC%C3%B3mo_monetizar_los_videos_en_YouTube__-_7_requisitos_para_ganar_dinero_con_tus_v%C3%ADdeos_de_Youtube.png"> </li> </ul> </div> <!-- controls --> <ul class="slideshow__control"> <li class="slideshow__control-item is-active"></li> <li class="slideshow__control-item"></li> <li class="slideshow__control-item"></li> </ul> <!-- next arrow --> <div data-dir="next" class="slideshow__arrow slideshow__arrow--next"> <i class="fa-solid fa-arrow-right"></i> </div> </div> </div>

JavaScript

<script type='application/x-suppress'>
  ( () => {
    const slideshows = document.querySelectorAll('.slideshow')
    if( !slideshows.length ) return

    slideshows.forEach( slideshow => {
      const slider            = slideshow.querySelector('.slideshow__content')
      const sliderChildren    = [...slider.children]
      const controls          = slideshow.querySelector('.slideshow__control')
      const controlsChildren  = controls && [...controls.children]
      const arrows            = [...slideshow.querySelectorAll('.slideshow__arrow')]
      const hasNextSlide      = () => currentSlideIndex < sliderChildren.length - 1
      const hasPrevSlide      = () => currentSlideIndex > 0
      const infiniteLoop      = false
      let   currentSlideIndex = 0
      
      // Helpers functions
      const getActiveSlideEl = () => slider.querySelector('.is-active')
      const toggleElementClass = (element, className) => element.classList.toggle(className)
      const resizeSlideshow = () => {
        const sliderSize = `${ getActiveSlideEl().querySelector('img').scrollHeight }px`
        slideshow.style.setProperty('--slideshow-height', sliderSize)
      }
  
      // Toggle arrows status
      const toggleArrowStatus = () => {
        if( !arrows.length ) return
  
        const arrowPrev = arrows.find( arrow => arrow.dataset.dir === 'previous' )
        const arrowNext = arrows.find( arrow => arrow.dataset.dir === 'next' )

        if( hasNextSlide() ) {
          // enabling next arrow
          arrowNext.classList.contains('disabled') && toggleElementClass(arrowNext, 'disabled')
        } else {
          // disabling next arrow
          toggleElementClass(arrowNext, 'disabled')
        }

        if( hasPrevSlide() ) {
          // enabling prev arrow
          arrowPrev.classList.contains('disabled') && toggleElementClass(arrowPrev, 'disabled')
        } else {
          // disabling prev arrow
          toggleElementClass(arrowPrev, 'disabled')
        }
      }
  
      // Toggle controls status
      const toggleControlStatus = () => {
        if( !controls ) return
  
        const previousSlideControl = controlsChildren.find(item => item.classList.contains('is-active'))
        const selectedSlideControl = controlsChildren[currentSlideIndex]
  
        // previous
        toggleElementClass(previousSlideControl, 'is-active')
        // selected
        toggleElementClass(selectedSlideControl, 'is-active')
      }
  
      // Controls
      const slideControl = ( event = null ) => {
        currentSlideIndex = controlsChildren.indexOf(event.target)
        slide()
      }
  
      // Dragging functionality
      let previousY = 0
      const dragSlider = event => {

        let direction

        // Deactivating event on slideshow
        slideshow.onmouseup = null
        slideshow.ontouchend = null

        // Check for dragging
        if( event.screenX ) {
          if( previousY === event.screenX ) return
          direction = previousY < event.screenX ? 'previous' : 'next'
        } else if ( event.changedTouches[0].screenX ) { // touch event
          if( previousY === event.changedTouches[0].screenX ) return
          direction = previousY < event.changedTouches[0].screenX ? 'previous' : 'next'
        }
        // console.log(previousY, event.screenX)
        // prevent dragging when no next/previous slide is found
        if( direction === 'next' & !infiniteLoop & !hasNextSlide() ) return
        if( direction === 'previous' & !infiniteLoop & !hasPrevSlide() ) return

        // slide
        slide(direction)
        previousY = 0
      }

      // Main slide function
      const slide = ( direction = null ) => {
        const currentSlide = getActiveSlideEl()
        const nextSlideFound = currentSlide[`${direction}ElementSibling`]

        // removing previous slide active class
        toggleElementClass(currentSlide, 'is-active')
  
        if( direction ) {
          if( nextSlideFound ) {
            toggleElementClass(nextSlideFound, 'is-active')
            direction === 'next' ? currentSlideIndex++ : currentSlideIndex--
          } else {
            // no slide found
            if(direction === 'next')  currentSlideIndex = 0
            if(direction === 'previous')  currentSlideIndex = sliderChildren.length - 1
            toggleElementClass(sliderChildren[currentSlideIndex], 'is-active')
          }
        } else {
          // comming from dots controls
          toggleElementClass(sliderChildren[currentSlideIndex], 'is-active')
        }
  
        slider.style.transform = `translate3d(-${ currentSlideIndex * 100 }%, 0, 0)`
  
        !infiniteLoop && toggleArrowStatus()
        toggleControlStatus()
      }
  
      // Stting up Events
      arrows && arrows.forEach( arrow => {
        arrow.onclick = slide.bind(null, arrow.dataset.dir)
      })
  
      controls && controlsChildren.forEach(child => {
        child.onclick = slideControl
      })

      slider.onmousedown = event => {
        previousY = event.screenX
        // Activating event on slideshow
        slideshow.onmouseup = dragSlider
      }

      slider.addEventListener('touchstart', event => {
        previousY = event.changedTouches[0].screenX
        // Activating event on slideshow
        slideshow.addEventListener('touchend', dragSlider, { passive: true })
      }, { passive: true })

      // prevent scrolling when touch
      slideshow.addEventListener('touchmove', event => event.preventDefault(), { passive: false })
  
      // Init
      window.addEventListener('load', resizeSlideshow)
      window.addEventListener('resize', resizeSlideshow)
      !infiniteLoop && toggleArrowStatus()
    } )
  } )();
</script>

Variables

  :root {
    --slideshow-padding: 1.25rem;
    --slideshow-max-width: 360px;
    --slideshow-height: 452px;
    --slideshow-transition: 600ms cubic-bezier(0.2,0,0.5,1) 0s;
    --slideshow-border-radius: var(--radius-lg, .5rem);
    --slideshow-arrow-size: 2.5rem;
    --slideshow-arrow-color: var(--color-accent);
    --slideshow-arrow-background: var(--color-white);
    --slideshow-arrow-border-radius: var(--radius-full, 9999px);
    --slideshow-arrow-shadow: 0 6px 20px 0 rgba(36, 41, 47, .4);
    --slideshow-control-size: .625rem;
    --slideshow-control-gap: .375rem;
    --slideshow-controls-border-radius: var(--radius-full, 9999px);
  }