Member Avatar for <M/>

Can anyone write a simple code for a slider that fades???? i want to do one just like the one on mbusa.com.... can anyone assist???

Thanks in advanced!

  • 5 Contributors
  • 11 Replies
  • 102 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

— since you want no heavy plugin and only a little jQuery, try this pattern: let CSS handle the visuals (opacity + translate for a fade+slide look) and use a very small script to toggle an active class. suggested a slideshow plugin, correctly noted you still need JS, hinted at z-index tricks, and shared a demo — the snippet below follows the “minimal JS, CSS-driven” route so you keep full control and smooth GPU-accelerated transitions.

HTML:

<div class="slider" aria-live="polite">
  <div class="slide active"><img src="img1.jpg" alt=""></div>
  <div class="slide"><img src="img2.jpg" alt=""></div>
  <div class="slide"><img src="img3.jpg" alt=""></div>
</div>

CSS:

.slider { position:relative; overflow:hidden; width:100%; height:400px; }
.slide { position:absolute; top:0; left:0; right:0; bottom:0;
        opacity:0; transform:translateX(20px);
        transition: opacity .6s ease, transform .6s ease;
        will-change: opacity, transform; }
.slide img { width:100%; height:100%; object-fit:cover; display:block; }
.slide.active { opacity:1; transform:translateX(0); z-index:2; }

Minimal JavaScript (vanilla; easy to adapt to jQuery):

var slides = document.querySelectorAll('.slide');
var current = 0;
var interval = 5000;
var transitionMs = 600;

function next(){
  var nextIdx = (current + 1) % slides.length;
  slides[nextIdx].classList.add('active');        // bring next in
  setTimeout(function(){
    slides[current].classList.remove('active');   // send previous back
    current = nextIdx;
  }, transitionMs);
}

var timer = setInterval(next, interval);
document.querySelector('.slider').addEventListener('mouseenter', function(){ clearInterval(timer); });
document.querySelector('.slider').addEventListener('mouseleave', function(){ timer = setInterval(next, interval); });

Notes and troubleshooting: keep transitionMs in sync with the CSS duration; preload images or use low-res placeholders to avoid flashes; will-change helps GPU acceleration but don’t overuse it; add keyboard controls and meaningful alt text for accessibility. If you want the explicit z-index reordering suggested, do reappend or change z-index only after the transition to avoid flicker. For old browsers, detect CSS transition support and fallback to a JS fade.

Recommended Answers

All 11 Replies

Member Avatar for hericles

Check out jQuery cycle. It is a jQuery library for slideshows with a variety of transitions. It is pretty easy to set up too.

Member Avatar for <M/>

thanks for that info, but I don't want a plugin... I want to do it purely of html5 and css3... and very little JQuery :)

Member Avatar for JorgeM

pretty sure you are still going to need at least JavaScript. jQuery is just a JavaScript library to make it easier to do client side processing.

if you take a look at the page source on mbusa.com, you'll find quite a bit of references to jQuery and JS scripts.

Member Avatar for <M/>

I know I'm gonna need it, but I don't want to write too much of jqeury... So you have any possible solutions... source codes? sites? tutorials? anything?

Member Avatar for hericles

Again you should check out jquery cycle. Beyond adding the libraries and correctly naming the divs on the page there is one script (a couple of lines) that you need to add to the page to set it all in motion.

Member Avatar for <M/>

But what if I wanted to create it myself? I don't want to have the troubles of a plugin because I want maximum control... so you have any sources but thanks for that fact...

Member Avatar for lps

If you wish for a basic fading effect, I may have a way to do it.
1. Use jquery to set the z-index of the pictures.
2. use fade() and reappend the image behind the last one while decreasing z-index of all pictures during the effect.

Member Avatar for <M/>

Can you write a snippet of code? I am learning bits and bits of jquery while I learn php/mysql

Member Avatar for pritaeas

Here's I wrote a while back (zip and demo available).

Member Avatar for <M/>

Thanks for the resource :)
Problem with the jquery file is that when I open it gives me a massive document (jquery-1.4.2.min.js)... is this supposed to happen?

Member Avatar for JorgeM

Instead of hosting your own jQuery file, it makes more sense to reference it from a CDN. The reason is that more than likely, a visitor has already downloaded the jQuery file and has it cached. When the visitor accesses your site, downloading jQuery will not be necessary.

Read more..
http://docs.jquery.com/Downloading_jQuery

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.