CODEWITHSUNDEEP
javascriptslider
MacPython
MacPython

Reputation: 18271

Simple Javascript Slider

Im trying to find a very very simple javascript slider. One that is the bare minimum, no fancy jquery, or other libraries involved. The simplest possible slider. With the minimum amount of code possible.

Thanks for the attention!

@ Roger Walsh:

Below the HTML code: The .js and the .css are identical to the example in the tutorial you send me. I guess I have to add some more info in the body section, but I dont understand what exactly. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<html>
<head>

<title> Slider </title> 

<script type="JavaScript" src="slider.js"></script>
<link href="default.css" rel="stylesheet" type="text/css" />

</head>

<body>

<html>
<head>

<title> </title> 
<script type="text/javascript">
</script>

</head>

<body>

<div class="carpe_slider_display_holder">
<!-- Default value: 0 -->
<input class="carpe_slider_display" id="display1" type="text" value="100" />
</div>
<div class="carpe_horizontal_slider_track">

    <div class="carpe_slider_slit"> </div>
    <div class="carpe_slider" id="my_id" orientation="horizontal" distance="100" display="my_id" style="left: 100px;"> </div>
</div>

<!--<div class="carpe_horizontal_slider_track">
    <div class="carpe_slider_slit"> </div>
    <div class="carpe_slider"
        id="my_id"
        orientation="horizontal"
        distance="100"
        display="my_id"
        style="left: 100px;"> </div>
</div>
-->
</body>
</html>

Upvotes: 3

Views: 11051

Answers (6)

Paul
Paul

Reputation: 467

   I’ve been using this component for my projects:

 <html>
    <script src="https://jsuites.net/v5/jsuites.js"></script>
    <link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
    
    <div id="slider">
        <img src="https://jsuites.net/templates/default/img/car.jpeg"/>
        <img src="https://jsuites.net/templates/default/img/car2.jpeg"/>
        <img src="https://jsuites.net/templates/default/img/car3.jpeg"/>
    </div>
    
    <br>
    
    <button id="open-slider" type="button" class="jbutton dark">Open the slider</button>
    
    <script>
    jSuites.slider(document.getElementById('slider'), {
        grid: true
    });
    
    document.getElementById('open-slider').addEventListener('click', function() {
        slider.open();
    });
    </script>
    </html>

It’s helped a lot!

https://jsuites.net/docs/image-slider

Upvotes: 0

PicoDevGit
PicoDevGit

Reputation: 309

I could create a simple slider with Javascript and JQuery. this slider can go to next or previous slide with fading effect and has a pair of buttons for controling it (i used some free photo links and JQuery cdn so maybe they change):

const box = $('.slider-box');
const children = box.children();
// a List of every slide object
var list = [];

$(document).ready(() => {

    children.each(function () {
        // Add the object of every slide
        list.push($(this));
    });

    children.each(function () {
        if ($(this).hasClass('active-slide') === false) {
            $(this).hide();
        }
    })
})

// Interval work variables
let timer = '';
var index = 1;
let status = 'after';

const sliderStart = () => {
    timer = setInterval(() => {

        // If its the first index, hide the last index
        if (index === 0) {
            list[list.length - 1].hide();
        } else {

            list[index - 1].hide();
        }

        // Show element
        list[index].fadeIn();
        index += 1;

        // If index is equal list length change to 0
        if (index === list.length) {
            index = 0;
        }
    }, 3000);
}

// To start automatically
sliderStart();

function next() {
    status = 'after';
    // console.log('Index is: ' + String(index));
    clearInterval(timer);

    // Hide the current slide
    if (index === 0) {
        list[list.length-1].hide();
    } else {
        list[index-1].hide();
    }

    // Show next slide
    list[index].fadeIn();

    // Show the next slide and index+
    if (0 <= index && index < list.length-1) {
        index += 1;
    } else if (index === list.length-1) {
        index = 0;
    }

    sliderStart();
}

function previous() {
    status = 'previous';
    // console.log('Index is: ' + String(index));
    clearInterval(timer);

    // Get the current slide index
    if (index === 0) {
        index = list.length-1;
    } else {
        index -= 1;
    }

    // Hide the current slide
    list[index].hide();

    // Show the last slide
    if (0 < index && index <= list.length-1) {
        list[index-1].fadeIn();
    } else if (index === 0) {
        list[list.length-1].show();
    }

    sliderStart();

}
div, body {
    margin: 0px;
    padding: 0px;
}

.slider-box {
    width: 100%;
    height: 150px;
}

.slide {
    width: 100%;
    height: 100%;
}

img {
    width: 100%;
    height: 100%;
}

.number {
    background-color: black;
    color: white;
    width: 100px;
    height: 100px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 500%;
    font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple-slider</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    
</head>
<body>

    <div class="slider-box">
        <div class="slide active-slide" id="slide1" style="background-color: blue">
            <div class="number">1</div>
            <img src="https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg?w=2000">
        </div>
        <div class="slide" id="slide2" style="background-color: red">
            <div class="number">2</div>
            <img src="https://img.freepik.com/premium-photo/beautiful-landscape-with-high-mountains-lagoon-water-with-sunlight-golden-sunrise_143683-8450.jpg">
        </div>
        <div class="slide" id="slide3" style="background-color: rgb(94, 235, 89)">
            <div class="number">3</div>
            <img src="https://img.freepik.com/premium-photo/man-stands-field-with-mountains-background_808092-6114.jpg?w=360">
        </div>
    </div>
    

    <button onclick="next()">next</button>
    <button onclick="previous()">previous</button>

</body>
</html>

Upvotes: 0

Cooper Maruyama
Cooper Maruyama

Reputation: 1612

Here you go: jsfiddle

JS:

//init
slides = document.getElementsByClassName("slide");
containerWidth = 500;

Array.prototype.forEach.call(slides, function (el, i) {//set the initial position of each slide
  el.style.left = (i * containerWidth) + "px";
});

window.moveSlides = function (direction) {
  run = true;
  tracker = containerWidth; //500 in this example. We make a separate variable so we can decrement it

  if (((direction == "next" && (parseInt(slides[0].style.left) <= (0 - (containerWidth * (slides.length - 1)))))) //compare against 2nd-to-last slide's index, otherwise it'll go 1 slide too far
     || (direction == "prev" && (parseInt(slides[0].style.left) >= 0))) { run = false; }

  if (run) {
    var slideInterval = setInterval(function () {
      moveRate = 4; //set the speed here (use numbers that the container's width can be divided by without a remainder)
        Array.prototype.forEach.call(slides, function (el, i) {
          if (tracker <= 0) {
             clearInterval(slideInterval)
          } else {
            el.style.left = (direction == "next") ? (parseInt(el.style.left) - moveRate) + "px" : (parseInt(el.style.left) + moveRate) + "px";
          }
        });
        tracker -= moveRate;
    }, 1);
  }
}

HTML:

<div id="slider-container">
  <div id="slider-mask">
     <div class="slide one">slide 1</div>
     <div class="slide two">slide 2</div>
     <div class="slide three">slide 3</div>
     <div id="buttons">
       <a href="javascript:moveSlides('prev');" id="prev">&lt;Previous</a>
       | 
       <a href="javascript:moveSlides('next');" id="next">Next&gt;</a>
     </div>
  </div>
</div>

CSS:

#slider-container {
  width: 999999px;
  height: 300px; //set to the height you want
  position:relative;
}
#slider-mask {
  width:500px;  //set slide width. must be equal to slide width
  height:300px;
  overflow:hidden;
  position:relative;
}
.slide {
  width:500px;
  height:100%;
  top:0;
  position:absolute;
}
#buttons {
  position:absolute;
  bottom:5px;
  left:50%;
  width: 150px;
  height:30px;
  margin-left:-75px;
}

Upvotes: 0

user3255925
user3255925

Reputation: 21

The Carpe Slider is now at version 3.0, and there is documentation here: http://carpe.ambiprospect.com/slider/documentation.htm and a test page: http://carpe.ambiprospect.com/slider/test.htm

The js code is 4 kB compressed.

Upvotes: 2

Naveed
Naveed

Reputation: 42093

If you want to code less and in quick time, I will recommend you to use an existing library for this.

Look at dhtmlx Slider

Simplest Slider Example

Upvotes: 1

Roger Walsh
Roger Walsh

Reputation: 339

Try this one:

http://carpe.ambiprospect.com/slider/

Upvotes: 0

Related Questions