Simple Rotary Banner

Asked

Viewed 22,327 times

0

Guys, I want to make a very simple rotary banner, with only the arrows on the sides and an image that changes all at once clicked, but I would like to use as little as possible of Jquery or Javascript, I tried to do but I’m a little rusty in the development with Jquery and Javascript and had many problems with plugins I found.

inserir a descrição da imagem aqui

It would be at most 5 images that alternate when clicked the button sideways. If possible without Jquery and Javascript. I once did something similar only with CSS but I can’t remember how and I don’t know if it’s possible.

javascript jquery html5 css3

  • What’s the matter with jQuery or Javacript? I’m also learning and would like to know if you have any special reason not to use.

5 answers

3

You can use the plugin Slick. It creates slides and has several different settings and modes. Despite the many settings it is super easy and versatile.

Just include the plugin’s CSS, jQuery and libs in your HTML, add the class or id in your code and start it with just 1 line.

HTML:

<div class="your-class">
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
</div>

Javascript:

$(document).ready(function(){
  $('.your-class').slick({
    setting-name: setting-value
  });
});

All settings are available in his documentation.

3

I needed a slider the other day, and the best and easiest I could find was this: Flexslider

jquery:

// Can also be used with $(document).ready()
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide"
  });
});

HTML:

<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
    <li>
      <img src="slide4.jpg" />
    </li>
  </ul>
</div>

DEMO: http://flexslider.woothemes.com/index.html

3

It is perfectly possible to do this only with HTML and CSS. Simply place each slide in a DIV with an anchor, enclose them all with another DIV, which will be your container, and create links within each slide pointing to the previous and later slides.

<div id="container">
    <div id="slide1">
        ....
    <a href="#slide2">Slide 2</a>
    </div>
    <div id="slide2">
        <a href="#slide1">Slide 1</a>
        ....
        <a href="#slide3">Slide 3</a>
    </div>
    <div id="slide2">
        <a href="#slide2">Slide 2</a>
        ....
    </div>
</div>

With CSS you should style the block container with a width and height that allows viewing only the contents of a slide (including links) using the overflow:Hidden property to hide the others.

The problem with this technique is that each click represents a Reload on the page, and a solution with javascript, besides being nothing else, would represent a much greater work, performance and visual gain.

2

I have an example using only HTML and CSS.

HTML:

<section class="carousel">
    <input type="checkbox" id="toggle">
    <label for="toggle" onclick>pausar</label>
    <div class="paineis">
        <article class="page1"><img src="http://placehold.it/350x150&text=Slide%201" alt=""></article>
        <article class="page2"><img src="http://placehold.it/350x150&text=Slide%202" alt=""></article>
        <article class="page3"><img src="http://placehold.it/350x150&text=Slide%203" alt=""></article>
        <article class="page4"><img src="http://placehold.it/350x150&text=Slide%204" alt=""></article>
        <article class="page5"><img src="http://placehold.it/350x150&text=Slide%205" alt=""></article>
    </div>
</section>

CSS:

@keyframes carousel{
    0%    { left:0; }
    11%   { left:0; }
    12.5% { left:-100%; }
    23.5% { left:-100%; }
    25%   { left:-200%; }
    36%   { left:-200%; }
    37.5% { left:-300%; }
    48.5% { left:-300%; }
    50%   { left:-400%; }
    61%   { left:-400%; }
    62.5% { left:-300%; }
    73.5% { left:-300%; }
    75%   { left:-200%; }
    86%   { left:-200%; }
    87.5% { left:-100%; }
    98.5% { left:-100%; }
    100%  { left:0; }
    /* daqui: http://csswizardry.com/2011/10/fully-fluid-responsive-css-carousel/ */
}
@keyframes go{
    0%    {  }
    100%    { left:-300%; }
}
@keyframes back{
    0%    { left:0; }
    100%  { left:100%; }
}
.carousel{
    width:100%; 
    overflow:hidden; 
    height:100%;}
.paineis{
    width:500% /* article w * 5 */; 
    overflow:hidden;  
    height:100%;  
    animation:carousel 30s infinite; position:relative;}
article{
    float:left; 
    width:20%;} 
img{
    height:100%; 
    width:100%}
input[type=checkbox]:checked ~ .paineis{animation-play-state:paused; animation: go 10s}

Demo: http://codepen.io/mapreuss/pen/ECGrB

He doesn’t have the forward and back arrows, but it pauses.

0

I use the jCarousel Lite that is easy to set up and meets your needs.

Browser other questions tagged javascript jquery html5 css3

You are not signed in. Login or sign up in order to post.