Bonjour à tous.

J'utilise un scripts pour un diaporama que j'ai repris sur le net et que j'ai modifier à ma sauce. 

Je change le design de mon site et j'aimerais le passer en responsive

<div class="image-carousel">
  <div class="inner">
     <img src="" alt="">
     <img src="" alt="">
     <img src="" alt="">
     <img src="" alt="">
     <img src="" alt="">
        
  </div>
    <div class="bubbles"></div>
    <div class="prev"></div>
    <div class="next"></div>
</div>

Un peu de CSS 

.image-carousel {
  width: 620px;
  height: 420px;
  -webkit-border-left: 5px solid orange;
  -khtml-border-left: 5px solid orange;
  -mso-border-left: 5px solid orange;
  -moz-border-left: 5px solid orange;
  -ms-border-left: 5px solid orange;
  -o-border-left: 5px solid orange;
  border-left: 5px solid orange;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  position: relative; }

  .image-carousel .inner {
    display: flex;
    position: absolute;
    left: 0;
    -webkit-transition: left 0.25s ease-out;
    -khtml-transition: left 0.25s ease-out;
    -mso-transition: left 0.25s ease-out;
    -moz-transition: left 0.25s ease-out;
    -ms-transition: left 0.25s ease-out;
    -o-transition: left 0.25s ease-out;
    transition: left 0.25s ease-out; }

  .image-carousel .bubbles {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin-bottom: 5px; }

    .image-carousel .bubbles .bubble {
      margin: 2.5px;
      background-color: orange;
      -webkit-border-radius: 100000px;
      -khtml-border-radius: 100000px;
      -mso-border-radius: 100000px;
      -moz-border-radius: 100000px;
      -ms-border-radius: 100000px;
      -o-border-radius: 100000px;
      border-radius: 100000px;
      width: 10px;
      height: 10px;
      display: inline-block;
      opacity: 0.25;
      -webkit-transition: opacity 0.1s linear;
      -khtml-transition: opacity 0.1s linear;
      -mso-transition: opacity 0.1s linear;
      -moz-transition: opacity 0.1s linear;
      -ms-transition: opacity 0.1s linear;
      -o-transition: opacity 0.1s linear;
      transition: opacity 0.1s linear;
      cursor: pointer; }
      

      .image-carousel .bubbles .bubble:hover {
        opacity: 0.65; }
      

      .image-carousel .bubbles .bubble.active {
        opacity: 1; }

  .image-carousel .next::after,
  .image-carousel .prev::after {
    content: '>';
    position: absolute;
    top: 50%;
    right: 0;
    background-color: orange;
    font-size: 20px;
    width: 1em;
    height: 3em;
    font-weight: bold;
    font-family: sans-serif;
    -webkit-transform: translateY(-50%);
    -khtml-transform: translateY(-50%);
    -mso-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    line-height: 3em;
    box-sizing: border-box;
    padding: 0 0.2em;
    cursor: pointer;
    opacity: 0.5;
    -webkit-transition: opacity 0.1s linear;
    -khtml-transition: opacity 0.1s linear;
    -mso-transition: opacity 0.1s linear;
    -moz-transition: opacity 0.1s linear;
    -ms-transition: opacity 0.1s linear;
    -o-transition: opacity 0.1s linear;
    transition: opacity 0.1s linear; }

  .image-carousel .next:hover::after,
  .image-carousel .prev:hover::after {
    opacity: 1; }

  .image-carousel .prev::after {
    content: '<';
    left: 0; }

.inner img {
  max-width: 620px;
  max-height: 420px; }

Et pour animer tous ça, un peu de JS

let carousels = document.getElementsByClassName('image-carousel');

[].forEach.call(carousels, function(c) { 
    let next = c.getElementsByClassName('next')[0],
        prev = c.getElementsByClassName('prev')[0],
        bubblesContainer = c.getElementsByClassName('bubbles')[0],
        inner = c.getElementsByClassName('inner')[0],
        imgs = inner.getElementsByTagName('img'),
        currentImageIndex = 0,
        width = 620,
        bubbles = [];

    for (let i = 0; i < imgs.length; i++) {
        let b = document.createElement('span');
        b.classList.add('bubble');
        bubblesContainer.appendChild(b);
        bubbles.push(b);

        b.addEventListener('click', function() {
            currentImageIndex = i;
            switchImg();
        });
    }

    function switchImg() {
        inner.style.left = -width * currentImageIndex + 'px';

        bubbles.forEach(function(b, i) {
            if (i === currentImageIndex) {
                b.classList.add('active');
            } else {
                b.classList.remove('active');
            }
        });
    }

    function showNext() {
        currentImageIndex++;

        if (currentImageIndex >= imgs.length) {
            currentImageIndex = 0;
        }

        switchImg();
    }

    function showPrev() {
        currentImageIndex--;

        if (currentImageIndex < 0) {
            currentImageIndex = imgs.length - 1;
        }

        switchImg();
    }

    next.addEventListener('click', showNext);

    prev.addEventListener('click', showPrev);

    switchImg();

    setInterval(showNext, 5000);
});

J'ai un problème dans le code Js car j'aimerais mettre autre choses que des tailles en dur, car je vais mettre des % dans mon css et j'aimerais que le JS suive aussi

width = 620,
 

J'ai farfouiller sur internet et les forum, mais je ne met pas la main dessus 

Merci

-
Edité par Community Technologie 1 mai 2018 à 11:15:27

En CSS tu peux faire du % et pour le faire en js tu défini dans un string la valeur en pourcentage.

el.style.width = "15%";

sauf que c'est plus simple avec une librairie qui fait déjà tout ça

Bootstrap