how to slide my content one by one clicking button(prev/next) or arrow in jquery?

Question

I want to slide my bx-content(div) when i click prev or next button. I have 3 content is visible when others are hidden. i have more than 10 bx-content(div) and if prev or next button is clicked then i want to slide one by one bx-content(div) and if all content is finishes and get clicked next button then show from the beginning again like cycle. could somebody help me please ? my html code is here

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
    <section class="bx-feature">
    <h3>Feature</h3>
    <button class="next">Next</button>
    <button class="previous">Prev</button>
    <hr style="clear: both;">
    <div class="bx-slider">
        <div class="bx-content">
            <img src="https://media-cdn.tripadvisor.com/media/photo-s/0c/f0/1e/2d/mt-everest-base-camp.jpg" alt="">
            <h3>Mount Everest</h3>
        </div>
        <div class="bx-content">
            <img src="https://www.wallpaperup.com/uploads/wallpapers/2013/03/23/58533/a2e7390e04f5ed3b6bba3576f75436bb.jpg" alt="">
            <h3>Mount Everest sunset</h3>
        </div>
        <div class="bx-content">
            <img src="https://media-cdn.tripadvisor.com/media/photo-s/0c/f0/1e/2d/mt-everest-base-camp.jpg" alt="">
            <h3>Mount Everest</h3>
        </div>
        <div class="bx-content">
            <img src="https://media-cdn.tripadvisor.com/media/photo-s/0c/f0/1e/2d/mt-everest-base-camp.jpg" alt="">
            <h3>Mount Everest</h3>
        </div>
        <div class="bx-content">
            <img src="https://media-cdn.tripadvisor.com/media/photo-s/0c/f0/1e/2d/mt-everest-base-camp.jpg" alt="">
            <h3>Mount Everest</h3>
        </div>
    </div>
</section>

and my css code is here

.bx-feature{ background-color: #e9e9e9; height: 360px; width: 90%; overflow: 
  hidden; margin: auto; margin-top: 100px;}
    .bx-feature h3{ float: left; }
    button{ float: right; border-radius: 5px; padding: 7px; margin: 10px 5px 
    0 5px; }
    .bx-slider{ margin: 10px 20px; }
    .bx-content{ height: 250px; width: 320px; overflow: hidden; float: left; 
   margin: 20px;}
    .bx-content img{ width: 100%; height: 200px; }

i'm not using any plugin right now. i just want to make it happen by jquery — Mr.Ra, Mar 30 '18 at 12:25
try this [**How to build simple jQuery image slider with sliding or opacity effect?**](https://stackoverflow.com/questions/12608356/how-to-build-simple-jquery-image-slider-with-sliding-or-opacity-effect?answertab=votes#tab-top) — Bhuwan, Mar 30 '18 at 12:30

score 0 · Answer 1 · answered Mar 30 '18 at 12:39

0

You have to get your button in jquery and add a listener on the click event after that just select your container and change play with the transform : translateX css properties.

Something like that :

var width = $(".bx-slider").width();
var numberChild = $(".bx-slider").children().length;
var move = width / numberChild;
var position = 0;
$(".next").click(
   () => {
      position -= move;
      $(".bx-slider").css({'transform' : 'translateX(' + position + 'px)'}
   }
);

just change minus to sum for the prev button

and btw put your code in a script tag

answered Mar 30 '18 at 12:39

Flavien Marianacci

149
8

thank you for your answer but it is not showing remain content and also if finishes all content and get clicked next then i want to get beginning content like cycle. could do this do me? – Mr.Ra Mar 30 '18 at 12:51
I think it is better if you learn js and jquery first. Because ofc I can code the behavior you want, but you will not be able to change this later. – Flavien Marianacci Apr 01 '18 at 17:07
thank you for your suggestion. now i'm going to use plugin. – Mr.Ra Apr 01 '18 at 17:10

how to slide my content one by one clicking button(prev/next) or arrow in jquery?

1 Answers1