-1

I need help to do a simple text slider in jQuery or JavaScript.

I need a slider with animation so that the text moves from right to left.

Within my code I have also pagination, where I need highlight which text is active.

This is all of what I have, I need to be very simple.

All answers on the internet are so complicated.

Can someone help me?

.active{
  color:red;
} 
<div class="buttons">
  <button name="prev">Prev</button>
  <button name="next">Next</button>
</div>

<div class="content">
  <div class="slide">
    <p>content od slide</p>
  </div>
  <div class="slide">
    <p>content od slide</p>
  </div>
  <div class="slide">
    <p>content od slide</p>
  </div>
</div>

<div class="paginator">
  <div class="pagin-tracker">1</div>
  <div class="pagin-tracker active">1</div>
  <div class="pagin-tracker">1</div>
</div>
Paul Done
  • 55
  • 1
  • 2
  • 7

2 Answers2

0

You can try this one. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .slider {

        }

        .slider__wrap {
            overflow: hidden;
        }

        .slide {
            width: 100%;
            display: inline-block;

            text-align: center;
        }

        .content {
            will-change: transform;
            white-space: nowrap; 
            transition: transform 0.3s;
        }

    </style>
</head>
<body>

    <div id="slider" class="slider">
        <div class="buttons">
          <button name="prev">Prev</button>
          <button name="next">Next</button>
        </div>

        <div class="slider__wrap">
            <div class="content" style="transform: translate(-100%);" data-active="1"> <!-- if you need to set initial position to the second slider, or you can use translate(0) to set it to the first slide  -->
              <div class="slide">
                <p>content od slide 1</p>
              </div>
              <div class="slide">
                <p>content od slide 2</p>
              </div>
              <div class="slide">
                <p>content od slide 3</p>
              </div>
            </div>
        </div>

        <div class="paginator">
          <div class="pagin-tracker">1</div>
          <div class="pagin-tracker active">1</div>
          <div class="pagin-tracker">1</div>
        </div>
    </div>


    <script>
        const slider = document.getElementById('slider');
        const sliderWrap = slider.querySelector('.slider__wrap');
        const sliderContent = sliderWrap.querySelector('.content');
        const sliderButtons = slider.querySelector('.buttons');
        const buttonPrev = sliderButtons.querySelector('button[name="prev"]');
        const buttonNext = sliderButtons.querySelector('button[name="next"]');
        const pages = Array.from(slider.querySelectorAll('.pagin-tracker'));
        const pagesCount = pages.length;
        const slidesCount = sliderContent.querySelectorAll('.slide').length;

        let activeIndex = sliderContent.getAttribute('data-active');

        const updatePaginator = () => {
            for (let i = 0; i < pagesCount; i++) {
                pages[i].classList.remove('active');
            }

            if (pages[activeIndex]) {
                pages[activeIndex].classList.add('active');
            }
        };

        const applyStyle = () => {
            sliderContent.setAttribute('data-active', activeIndex);
            sliderContent.style.cssText = `transform: translate(-${activeIndex * 100}%);`;

            updatePaginator();
        };

        buttonPrev.addEventListener('click', () => {
            if (activeIndex > 0) {
                activeIndex--;

                applyStyle();
            }
        }, false);

        buttonNext.addEventListener('click', () => {
            if (activeIndex < slidesCount - 1) {
                activeIndex++;

                applyStyle();
            }
        }, false);
    </script>
</body>
</html>
Valeriy Siestov
  • 81
  • 2
  • It works, but I need text on multiple rows, and this solution stacks one and then goes wrong. – Paul Done Sep 22 '18 at 21:02
  • You can have as many lines of text inside your .slide as you want. You can add there any kind of information, like texts, images, video. Now you have

    , you can put there another content. One slide fits the full width of the slider container, if you want to change a slide site, position you can just do it for .slider container. Or maybe I don't understand you completely, give me more info)

     – Valeriy Siestov Sep 22 '18 at 21:28
  • Here you can see that a paragraph on a multiple line I can not use is still on a single line.http://jsfiddle.net/x0mq7vbr/6/ – Paul Done Sep 22 '18 at 21:33
  • Oh, sorry. Forgot to add reset for white-space. .slide { width: 100%; display: inline-block; text-align: center; white-space: normal; } Add white-space: normal for .slide. And everything should be ok – Valeriy Siestov Sep 22 '18 at 21:59
  • It works so that it can be multiple rows, but if the content is different in a row, in others it looks really stupid. It's a super efficient solution through css, but this is a very bad bug.http://jsfiddle.net/r7puken8/5/ – Paul Done Sep 22 '18 at 22:11
  • You can add vertical-align: middle for .slide class, like this .slide { width: 100%; display: inline-block; vertical-align: middle; text-align: center; white-space: normal; } All blocks will be aligned at the middle, or you can choose top/bottom if they are more suitable for your goal – Valeriy Siestov Sep 22 '18 at 22:16
0

You can use something like this and extend as per you requirement.

https://codepen.io/anon/pen/MqRpKg

HTML

<div class="slide-wrap">
      <div class="slide-mask">
        <ul class="slide-group">
          <li class="slide">this</li>
          <li class="slide">is</li>      
          <li class="slide">a</li>
          <li class="slide">simple</li>
          <li class="slide">slider</li>
        </ul>
      </div>

    <div class="slider-nav">
      <ul></ul>
    </div>
    </div>

JQuery: 

var $slide = $('.slide'),
    $slideGroup = $('.slide-group'),
    $bullet = $('.bullet')

var slidesTotal = ($slide.length - 1),
    current = 0,
    isAutoSliding = true;

$bullet.first().addClass('current');
var clickSlide = function() {
  //stop auto sliding
  window.clearInterval(autoSlide);
  isAutoSliding = false;

  var slideIndex = $bullet.index($(this));

  updateIndex(slideIndex);
};

var updateIndex = function(currentSlide) {
  if(isAutoSliding) {
    if(current === slidesTotal) {
      current = 0;
    } else {
      current++;
    }
  } else {
      current = currentSlide;
  }

  $bullet.removeClass('current');
  $bullet.eq(current).addClass('current');

  transition(current);
};

var transition = function(slidePosition) {
    var slidePositionNew = (slidePosition ) * 500;
    $slideGroup.animate({
      'left': '-' + slidePositionNew + 'px'
    });
};


var autoSlide = window.setInterval(updateIndex, 2000);

$( "li.slide" ).each(function( index ) {
$('.slider-nav').append('<span class="bullet">'+index+'</span>');
});
var $bullet = $('.bullet');
$bullet.on( 'click', clickSlide);

CSS

body {
    background: rgb(191, 76, 76);
}

/* slider
----------------------*/
.slide-wrap {
  margin: 5% auto 0;
  width: 540px;
}
.slide-mask {
  position: relative;
  overflow: hidden;
  height: 100px;
}
.slide-group {
  position: absolute; 
  top: 0px; 
  left: 0;
}
.slide {
display:inline-block;
  height: 100px;
width:500px;
    font: 100 90px/135px "lato";
    font-size: 2em;
    color: #fff;
    text-align: center;
    text-transform: uppercase;  
}

/* nav
----------------------*/
.slide-nav {
  text-align: center;
border: 1px solid red;
  height: 30px;
  color: red;
}
.slide-nav ul {
    margin: 0;
    padding: 0;
}
.slide-nav li {
  border: 1px solid red;
width: 100px;
  cursor: pointer;
color: red;
}
.slide-nav li.current {
    background: rgb(144, 39, 39);
}
.slider-nav {
width: 300px;
  text-alignt: center;
margin-left:40%;
}
span.bullet {
display:inline-block;
  width: 30px;
cursor: pointer;
}
sachin kumar
  • 159
  • 1
  • 1
  • 9