Animation manually Jquery

Question

I’d like to get an idea how I can make a kind of SLIDE now with user interaction.

I can’t find anything on the Internet to base on, and I can’t figure out how to do that!

In the code I have a class slide1 what makes onclick and the result appears on the screen.

$(document).ready(function () {
                $('.logo').on('click',function(){
                     
                   /*alert('oi'); */
                    $('.mostraBox').css('display','inline')
                    
                  
                });
            });

 .slide {
                position: relative;
                width: 650px;
                height: 500px;

                margin: 0 auto;
            }
            .slide img {
                position: absolute;

            }
            .logo {
                width: 130px;
                height: 100px;
                margin-top:150px;
                margin-left: 100px;
                border: 5px solid #FF0000;
                position: absolute;

            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide">
            <div class="slide1">
            <img src="http://s2.glbimg.com/NpGhQXJdJdvabAJZK61Tj6mRYQo=/0x0:694x391/695x392/s.glbimg.com/po/tt2/f/original/2015/04/20/windows-10-logo.jpg" />
            <div class="logo"></div>
            <div class="mostraBox" style="display:none;width:100px;height: 20px; float:right;  position: absolute;">Bem vindo ao Windows!</div>
        </div>
            </div>

I’m trying to make another class slide2 and make another interaction with the user.

Now to get to the slide2 I need to have a forward button.

I searched everything and I could not resolve my doubt.

Answer 1

As your question was about an idea of how to make a slider, I made one here that maybe you can adapt to your needs.

The idea of this slide below is simple and enough people use sliders so:

The slides are inside a box. By clicking a link the content moves inside the box to the right or to the left animating margin-left.

The #scrolleraux div encompasses all slides within the #slidesbox div that has overflow=Hidden.

Read the comments within the code to better understand. If this code is of any help, give a moral and click the arrow up to give me reputation points. Any questions, ask. Valew, falows. Big hug.

/* arquivo codigo_slide.js */

$(document).ready(function(){

	$('.proximo').click(function(){
		marginvalue = $("#scrolleraux").css("margin-left");
		
		marginvalue = marginvalue.replace("px", "");  // tira o px pra usar em cálculo
		
		marginvalue=parseInt(marginvalue); //converte de string para inteiro
		
		marginvalue = marginvalue - 600;
		
		//alert(marginvalue);

		$("#scrolleraux").animate({ 
		'margin-left' : marginvalue,
		}, "slow");	
	});

	$('.anterior').click(function(){
		marginvalue = $("#scrolleraux").css("margin-left");
		
		marginvalue = marginvalue.replace("px", "");  // tira o px pra usar em cálculo
		
		marginvalue=parseInt(marginvalue);
		
		marginvalue = marginvalue + 600;
		
		//alert(marginvalue);

		$("#scrolleraux").animate({ 
		'margin-left' : marginvalue,
		}, "slow");	
	});				
		
});

/* arquivo estilo.css */

/* 1) Definir tamanho da caixa que guarda os slides e dos slides */
/* 
- Se for mudar o valor do width, mude tb nos dois blocos de Javascript 
- Se for mudar o valor do height, mudar tb no css do #scrolleraux 
*/
#slidesbox, .slide { width:600px; height:300px; }

/* 2) scrolleraux é uma tira que agrupará todos os slides juntos e será animada a margem esquerda dessa div */
/* Esse valor da width abaixo tá extrapolado pra poder acrescentar mais slides sem se importar com o tamanho, 
   mas o importante é só que caibam todos os slides um do lado do outro  */
#scrolleraux { height:300px; width:99999px; overflow:hidden; margin-left:-0px; }

/* 3) A caixa não cresce junto com o conteúdo */
#slidesbox { 
			 overflow: hidden;  
			 border:1px solid #000;
		   }
		   
/* 4) Os slides devem ficar um ao lado do outro  */
.slide { float:left; overflow:hidden; }

.anterior, .proximo { cursor: pointer; color:#adf; }

<!DOCTYPE html>
<html>
<head>
	<title>Exemplo de Slider com Jquery</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  	<link rel="stylesheet" type="text/css" href="estilo.css">
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  
  <script src="codigo_slide.js"></script>  
  

</head>
<body>


<div id="slidesbox">
<div id="scrolleraux">

	<div class="slide">
		<h1>SLIDE 1</h1>
		<span class="proximo">Próximo &raquo;</span>
	</div>							<!-- O primeiro slide não tem link Anterior -->
	
	<div class="slide">
		<h1>SLIDE 2</h1>
		<span class="anterior">&laquo; Anterior</span> |
		<span class="proximo">Próximo &raquo;</span>
	</div>
	
	<div class="slide">
		<h1>SLIDE 3</h1>
		<span class="anterior">&laquo; Anterior</span> |
		<span class="proximo">Próximo &raquo;</span>
	</div>		

	<div class="slide">
		<h1>SLIDE 4</h1>
		<span class="anterior">&laquo; Anterior</span>
	</div>							<!-- O último slide não tem link Próximo -->
	
	
</div>
</div>

<body>
<html>

Answer 2

I find a small problem of concept with the question of the topic. Javascript in was created precisely for interactivity. So the idea of a slide not having interactivity, it’s totally weird, even though it’s common that we can’t always do what you want with the codes. I noticed that almost everyone in the topic is using Jquery. Jquery was created to facilitate certain routines, and problems with browser compatibility. Don’t necessarily have to use Jquery at all task.

My suggestion is to first create the slide with pure javascript, and then implement Jquery features in the functions. As for the code, I would create a code snippet on each slide with javascript event, using the setInterval function to switch between slides. For example :

document.getElementById("slide").innerHTML = '<taghtml onclick="MinhaFuncaoInterativa">Meu conteúdo</taghtml>';

I’ve prepared a code just this afternoon to explain what I’m saying. Read the code comments, and try to put img instead of H1. Only when you get to the second slide, click on the title to understand what I’m talking about.

<!DOCTYPE html>
<html>
    <!--
        @ Autor: Paulo Sérgio Duff
        @ Assunto : Slide com interatividade
        @ Plataform: stack overflow
        -->
    <head>
        <title>Meu slide interativo</title>
        <script type="text/javascript">
            var slide = 1; // Configura para chamar o primeiro slide com valor em 1
            var max   = 3; // Configura a quantidade mäxima de slide

                function conteudoDoSlide()
                                        {   
                                            document.getElementById("slide").innerHTML = '<h1 id="interatividade'+slide+'" onclick="interatividade'+slide+'()">'+'Slide número '+slide+'</h1>'; //Eu trocaria h1 por img para ficar mais ilustrativo.

                                            if (slide >= max) // Evita que slide ultrapasse o limite máximo escolhido pela variavel max
                                            {
                                                 slide = 1;
                                            }
                                                else
                                                {
                                                    slide++;
                                                }


                                                /*
                                                 * ########## COLOQUE AQUI SEU CÓDIGO JQUERY ###################
                                                 */
                                        }

                function passarSlide()
                                        {
                                            setInterval("conteudoDoSlide()", 3000); // Aplica a função conteudoSlide() a cada 3000 milisegundos (3 segundos) 
                                                /*
                                                 * ########## COLOQUE AQUI SEU CÓDIGO JQUERY ###################
                                                 */
                                        }
                function iniciaSlide() // Função apenas para evitar que a página inicie sem nada de slide. Em seguida chama o temporizador! 
                                        {
                                            document.getElementById("slide").innerHTML = '<h1 id="interatividade'+slide+'" onclick="interatividade'+slide+'()">'+'Slide número '+slide+'</h1>';
                                            slide++;
                                            passarSlide();
                                        }

                function interatividade2()
                                        {
                                            alert('O slide 2 está sendo interativo!'); // Configura a interatividade de um dos slides. 
                                                /*
                                                 * ########## COLOQUE AQUI SEU CÓDIGO JQUERY ###################
                                                 */
                                        }


        </script>
    </head>
    <body onload="iniciaSlide()">
        <center>
            <div id="slide"></div>
        </center>
    </body>
</html>