Home / Questions / 182619
Accepted
Eduardo
Asked: 2020-07-20 10:52:07 +0800 CST 2020-07-20 10:52:07 +0800 CST

How to create a simple online game leaderboard slider?

  • 772

I have the game marker structure, but would like to be able to add, more than one game in progress.

I would like to be able to create a Slider where the next container <div class="item"></div>passes the other container for certain xminutes.

How can I implement a very simple simple slider for what I want?

.upcoming-section {
  text-align: center;
  padding: 93px 0 98px;
}

.upcoming-section .container {
  max-width: 900px;
  margin: 0 auto;
}

.upcoming-section h2 {
  text-align: center;
  color: #000;
  margin-bottom: 40px;
  font-weight: 600;
  letter-spacing: 1px;
}

.upcoming-section h4 {
  color: #000;
  font-size: 15px;
  font-weight: 400;
  margin: 14px 0 0;
  text-transform: uppercase;
}

.upcoming-section span.date {
  padding-top: 10px;
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
}

.upcoming-section span {
  display: block;
  text-transform: uppercase;
  font-size: 15px;
  margin-right: 0;
}

.upcoming-section .vs {
  color: #fbc02d;
  font-size: 25px;
  font-weight: 600;
  padding: 50px 0;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

	<div class="upcoming-section">
		<div class="container">
			<h2>Upcoming Match</h2>
			<div id="upcoming" class="carousel">
				<div class="item">
					<div class="col-md-4 col-sm-4 col-xs-4">
						<img src="https://ssl.gstatic.com/onebox/media/sports/logos/9toerdOg8xW4CRhDaZxsyw_96x96.png" alt="">
 						<h4>Trirsal</h4>
					</div>
					<div class="col-md-4 col-sm-4 col-xs-4">
						<span class="date">JUNE 16, 17:00</span>
						<span class="vs">VS</span>
						<span>Central Olympic Stadium</span>
					</div>
					<div class="col-md-4 col-sm-4 col-xs-4">
						<img src="https://ssl.gstatic.com/onebox/media/sports/logos/9toerdOg8xW4CRhDaZxsyw_96x96.png" alt="">
						<h4>Kapa Club</h4>
					</div>
				</div>
				<div class="item">
					<div class="col-md-4 col-sm-4 col-xs-4">
						<img src="https://ssl.gstatic.com/onebox/media/sports/logos/9toerdOg8xW4CRhDaZxsyw_96x96.png" alt="">
 						<h4>Trirsal</h4>
					</div>
					<div class="col-md-4 col-sm-4 col-xs-4">
						<span class="date">JUNE 16, 17:00</span>
						<span class="vs">VS</span>
						<span>Central Olympic Stadium</span>
					</div>
					<div class="col-md-4 col-sm-4 col-xs-4">
						<img src="https://ssl.gstatic.com/onebox/media/sports/logos/9toerdOg8xW4CRhDaZxsyw_96x96.png" alt="">
						<h4>Kapa Club</h4>
					</div>
				</div>
			</div>
		</div>
	</div>

A simple slider, something like that, how can I create it?

enter image description here

jquery

4 Answers

  1. Best Answer

    The bootstrap library itself that you have added allows you to create simple sliders.

    https://getbootstrap.com/docs/3.3/javascript/#carousel

        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
    • 2

  2. I found an article written on StackOverflow (English), based on the question where you indicate

    How can I implement a very simple simple slider for what I want?

    The following code meets the question, it is structured in a simple way using only jQuery.

    $(".slider .content-slides").width($(".slider .content-slides").children().size() * $(".slider .content-slides").width());


function slideStart()
{
    curPage = ((index) % $(".slider .content-slides").children().size()) + 1;
    $(".slider .content-slides").animate({
        "left": -($(".slider .content-slides li:nth-child(" + curPage + ")").position().left)
    });
    $(".slider .content-pagination li").removeClass("active-marker");
    $(".slider .content-pagination li:nth-child(" + curPage + ")").addClass("active-marker");
    index++;
}


$(".slider .content-pagination li a").click(function(){
    index = $(this).attr("href");
    clearInterval(islider);
    slideStart();
    islider = setInterval("slideStart()", 2500);
    return false;
});

$(document).ready(function(){
    index = 0;
    islider = setInterval("slideStart()", 2500);
});
    .slider {padding: 0; height: 150px; position: relative; overflow: hidden; width: 270px;}
.slider .content-slides {position: absolute; top: 0; left: 0; padding: 0; margin: 0;}
.slider .content-slides li {width: 270px; height: 150px; position: relative; float: left; list-style: none;}
.slider .content-slides li img {width: 270px; height: 150px; display: block;}
.slider .content-slides li .desc {position: absolute; font-size: 90%; background: #999; background: rgba(0, 0, 0, 0.5); left: 0; top: 0; width: 100%; overflow: hidden; padding: 0 0 5px;}
.slider .content-slides li .desc * {color: #fff; width: 200px; margin: 5px 10px; line-height: 1.1em;}
.slider .content-pagination {text-align: right; position: absolute; bottom: 10px; right: 10px; z-index: 5;}
.slider .content-pagination li {float: none; display: inline; font-size: 0.75em; padding: 0.25em;}
.slider .content-pagination li a {width: 7px; height: 7px; border-radius: 7px; background-color: #ccc; overflow: hidden; line-height: 10px; font-size: 1px; text-indent: -999em; display: inline-block; *display: inline; *zoom: 1;}
.slider .content-pagination li.active-marker a,
.slider .content-pagination li a:hover {background-color: #08c; color: #fff;}
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    
    
    <div class="slider">
    <ul class="content-pagination">
        <li><a href="0"></a></li>
        <li><a href="1"></a></li>
        <li><a href="2"></a></li>
        <li><a href="3"></a></li>
        <li><a href="4"></a></li>
    </ul>
    
    <ul class="content-slides">
        <li>
            <img src="http://lorempixel.com/270/150/sports/1/" alt="" />
            <div class="desc">
                <h3>Heading 1</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>
        </li>
        <li>
            <img src="http://lorempixel.com/270/150/sports/2/" alt="" />
            <div class="desc">
                <h3>Heading 2</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>
        </li>
        <li>
            <img src="http://lorempixel.com/270/150/sports/3/" alt="" />
            <div class="desc">
                <h3>Heading 3</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>
        </li>
        <li>
            <img src="http://lorempixel.com/270/150/sports/4/" alt="" />
            <div class="desc">
                <h3>Heading 4</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>
        </li>
        <li>
            <img src="http://lorempixel.com/270/150/sports/5/" alt="" />
            <div class="desc">
                <h3>Heading 5</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>
        </li>
    </ul>
  </div>

    Original source, credits Praveen Kumar Purushothaman.

    • 2

  3. This code could help you, it was taken from http://jygproyectosweb.com/articulos/Slider-manual-infinito-sin-plugins :

    Each game you have can be added inside the tags and the time can be controlled with the setInterval of the javascript autoplay() function, in this case it is 5 seconds (5000 ms). And if what you want is to increase or decrease slides, just add or remove section elements and in the css attribute .slider {width: 400%;} increase or decrease by 100% for each section added and removed respectively, in this as they are 4 slides the value is 400%.

    CSS:

    *{
  box-sizing: border-box;
}

body {
  display: flex;
  min-height: 100vh;
  background: #EFC076;
}

.contenedor-slider {
  margin: auto;
  width: 85%;
  max-width: 900px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 10px #fff,
 0 15px 50px;
}

.slider {
  display: flex;
  width: 400%;
}

.slider__section {
  width: 100%;
}

.slider__img {
  display: block;
  width: 100%;
  height: 100%;
}

.btn-prev, .btn-next {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.7);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  line-height: 40px;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  border-radius: 50%;
  font-family: monospace;
  cursor: pointer;
}

.btn-prev:hover, .btn-next:hover {
  background: white;
}

.btn-prev {
  left: 10px;
}

.btn-next {
  right: 10px;
}

    HTML:

    <div id="contenedor-slider" class="contenedor-slider">
 <div id="slider" class="slider">
    <section class="slider__section"><font size="+6">JUEGO 1</font></section>
    <section class="slider__section"><font size="+6">JUEGO 2</font></section>
    <section class="slider__section"><font size="+6">JUEGO 3</font></section>
    <section class="slider__section"><img src="http://youghaltennisclub.ie/wp-content/uploads/2014/06/Tennis-Wallpaper-High-Definition-700x300.jpg" class="slider__img"></section>
  </div>
  <div id="btn-prev" class="btn-prev">&#60;</div>
  <div id="btn-next" class="btn-next">&#62;</div>
 </div>

    JavaScript:

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
//almacenar slider en una variable
var slider = $('#slider');
//almacenar botones
var siguiente = $('#btn-next');
var anterior = $('#btn-prev');

//mover ultima imagen al primer lugar
$('#slider .slider__section:last').insertBefore('#slider .slider__section:first');
//mostrar la primera imagen con un margen de -100%
slider.css('margin-left', '-'+100+'%');

function moverD() {
    slider.animate({
        marginLeft:'-'+200+'%'
    } ,700, function(){
        $('#slider .slider__section:first').insertAfter('#slider .slider__section:last');
        slider.css('margin-left', '-'+100+'%');
    });
}

function moverI() {
    slider.animate({
        marginLeft:0
    } ,700, function(){
        $('#slider .slider__section:last').insertBefore('#slider .slider__section:first');
        slider.css('margin-left', '-'+100+'%');
    });
}

function autoplay() {
    interval = setInterval(function(){
        moverD();
    }, 5000);
}
siguiente.on('click',function() {
    moverD();
    clearInterval(interval);
    autoplay();
});

anterior.on('click',function() {
    moverI();
    clearInterval(interval);
    autoplay();
});

autoplay();
</script>

    I hope it works for you.

    • 1

  4. Hello friend, say hello, I leave you a working example of " bxSlider " I use it often in my projects and it is quite easy to use. I hope you find it useful.

    		$( document ).ready(function() {
		  //bxSlider
	    $('.bxSlider').bxSlider({
          auto: true,
          pager: true,
	      moveSlides: 1,
	      infiniteLoop: true,
          autoControls:false,
          stopAutoOnClick: true,
          pager: true,
          slideWidth: 800,
          minSlides: 3,
	      maxSlides: 3,
	    });
	});
    <!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>bxSlider</title>
	<!--bxSlider-->
<link rel="stylesheet" href='https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css'>
</head>  
  
<body>
<div class="bxSlider">
    <div style="text-align:center">    
<img src="https://ssl.gstatic.com/onebox/media/sports/logos/9toerdOg8xW4CRhDaZxsyw_96x96.png" alt=""/>
<h4>real 1</h4>
	  </div>
	  <div style="text-align:center">
<img src="https://ssl.gstatic.com/onebox/media/sports/logos/9toerdOg8xW4CRhDaZxsyw_96x96.png" alt=""/>
<h4>real 1</h4>
    </div>
    <div style="text-align:center">
<img src="https://ssl.gstatic.com/onebox/media/sports/logos/9toerdOg8xW4CRhDaZxsyw_96x96.png" alt=""/>
<h4>real 1</h4>
    </div>
    <div style="text-align:center">
<img src="https://ssl.gstatic.com/onebox/media/sports/logos/9toerdOg8xW4CRhDaZxsyw_96x96.png" alt="">
<h4>real 1</h4>
    </div>
    <div>
    </div>
	</div>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js'></script>
<script>

	</script>
</body>

</html>

    • 1