Simple Rotating Banner

Question

Simple Rotating Banner

Navigation

#1 by (3 votes)
#2 by (3 votes)
#3 by (3 votes)
#4 by (2 votes)
#5 by (0 votes)

0

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

There would be at most 5 images that alternate when the button is clicked sideways. If possible do without Jquery and Javascript. I once did something similar with just CSS but I do not remember how and I do not know if it's possible.

javascript jquery html5 css3

asked by anonymous 04.08.2014 / 21:31

5 answers

Run script for every 1000 queried records What are the applications of arrays in day to day? (examples of its usability)

score 3 · Answer 1

I needed a slider the other day, and the best and easiest one I found 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: link

score 3 · Answer 2

It is perfectly possible to do this only with HTML and CSS. All you have to do is 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 next 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 have to style the container in block with a width and height that allows the visualization only of the contents of a slide (including the 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 javascript solution, as well as being nothing out of the other world, would represent a much larger work, performance, and visual gain.

score 3 · Answer 3

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

Simply include the CSS, jQuery and plugin libs in your HTML, add the class or id in your code and start it with only 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 their documentation.

score 2 · Answer 4

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: link

It does not have the arrows to move forward and back, but you can pause.

score 0 · Answer 5

0

I use jCarousel Lite that is easy to setup and suits your needs.

07.08.2014 / 19:53