Abonneren op: RSS

Things go better with HTML5 & CSS3

Gigadesign


Zelf maken is soms beter

In: CSS, HTML, jQuery

Omdat het soms niet anders kan

Bij een recent project was het niet mogelijk om extra jQuery plugins te laden, er was wel een bestaand JavaScript bestand ter beschikking, dus dan kan het niet anders als je gewilde behavior zelf te schrijven. Dat kan dan als uitdaging tellen.

Minimalistische content slider

Vooraleer keihard te gaan code schrijven, eerst het principe uitwerken van wat je wil gaan realiseren.

  1. De inhoud mag om het even wat zijn, en gaat horizontaal scrollen
  2. links en rechts scrollen wordt mogelijk gemaakt door herkenbare C.T.A‘s
  3. Deze mogen enkel getoond worden indien mogelijk/nodig


We gaan beginnen

Eerst maken we onze container aan #slidercontainer met daarin onze 2 knoppen die we willen gebruiken om te sliden, respectievelijk #sliderprev & #slidernext die we absoluut positioneren ten opzichten van #slidercontainer daar deze position: relative heeft.

1
2
3
4
5
6
7
<div id="slidercontainer" class="posrelative">
  <a href="#" id="sliderprev" class="posabsolute"></a>
  <a href="#" id="slidernext" class="posabsolute"></a>
  <div id="sliderwrapper">
   <! -- inhoud -->
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
.posrelative {position: relative;}
.posabsolute {position: absolute;}
#slidercontainer {
 width: 940px;
 height: 535px;
 overflow: hidden;
 background-color: #fff;
}
#sliderwrapper {
 width: 2820px;/* 3 X 940 */
}

In onze #sliderwrapper kunnen we nu onze (in dit geval 3) div steken die we gebruiken om de inhoud per slide te voorzien.
We zetten hier al vast dat de eerste zichtbaar zal zijn initieel, en de volgende 2 niet door de class=”notactive” toe te voegen, dit helpt qua leesbaarheid van je code moest je in problemen geraken, de class zelf zal niet zorgen voor het zichtbaar zijn of niet. Semantiek rules!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="left floatstop active">
 <div class="left col380">
  <div class="sliderpadder">
   <h3>Sunrise</h3>
   <!-- inhoud hier -->
  </div>
 </div>
 <div class="left col560">
  <img src="http://flickholdr.com/560/535/sunrise" alt="">
 </div>
</div>
<div class="left floatstop notactive">
 <!-- 2de inhoud -->
</div>
<div class="left floatstop notactive">
 <!-- 3de inhoud -->
</div>

We zorgen ervoor dat de slides zelf niet groter kunnen zijn als de container:

1
2
3
4
#sliderwrapper > div {
 width: 940px;
 height: 535px;
}

En dan nog een paar global class’es declareren om self-clearing-float’s te hebben en een beetje ruimte voor tekst maken:

1
2
3
4
5
6
7
8
9
10
11
12
13
.left {
 float: left;
}
.floatstop:after {
 clear: both;
 content: ".";
 display: block;
 height: 0;
 visibility: hidden;
}
.sliderpadder {
 padding: 35px 35px 0 60px;
}

Tenslotte rest het nog om de knoppen om de inhoud te sliden te stylen. Ze zijn niet zichtbaar, maak je hierom geen zorgen, het wel of niet zichtbaar van de knoppen gaan we met JavaScript afhandelen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#slidercontainer #sliderprev, 
#slidercontainer #slidernext {
 height: 535px;
 width: 50px;
 top: 0;
 z-index: 2;
 display: none;
}
#slidercontainer #sliderprev {
 background: url(slider-prev.png) no-repeat 0 0;
 left: 0;
}
#slidercontainer #slidernext {
 background: url(slider-next.png) no-repeat 0 0;
 right: 0;
}

Download images

slider-next.png | slider-prev.png

jQuery – de volgende knop

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var theActiveOne, theNextNoActiveOne, thePrevNoActiveOne;
$('#slidernext').show();
$('#slidernext').click(function(a) {
  a.preventDefault();
  $('#sliderprev').show();
  theActiveOne = $('#slidercontainer').find('.active');
  theNextNoActiveOne = theActiveOne.next();
  if(theNextNoActiveOne.length) {
    theActiveOne.animate({marginLeft: '-940px'},500, function() {
      theActiveOne.removeClass('active').addClass('notactive');
      theNextNoActiveOne.addClass('active').removeClass('notactive');
      if(!theNextNoActiveOne.next().length) {
        $('#slidernext').hide();
      }
    });
  }
});

jQuery – de vorige knop

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$('#sliderprev').click(function(b) {
  b.preventDefault();
  $('#slidernext').show();
  theActiveOne = $('#slidercontainer').find('.active');
  thePrevNoActiveOne = theActiveOne.prev('div');
  if(thePrevNoActiveOne.length) {
    thePrevNoActiveOne.animate({marginLeft: '0'},500, function() {
    theActiveOne.addClass('notactive').removeClass('active');
    thePrevNoActiveOne.removeClass('notactive').addClass('active');
    if(!thePrevNoActiveOne.prev('div').length) {
      $('#sliderprev').hide();
    }
    });
  }
});

Dit is de minst mogelijke code die nodig is om een basic content slider te maken, ik denk niet dat het nog korter gaat, tenzij je variabelen begint te hernoemen naar a,b,c etc …
Dus de slider doet nu precies wat gewild was, volgende & vorige knoppen enkel als nodig, horizontaal sliden. Moet het altijd meer zijn?

  • Reen - 9/08/2012

    Je kan “notactive” nog weghalen en er standaard van uitgaan dat een slide niet actief is. (Je begint zelf over minst mogelijke code ;))

    De variablen: “theActiveOne, theNextNoActiveOne, thePrevNoActiveOne” staan in je global scope, dat is niet nodig en bovendien bevatten thePrev en theNext niet altijd daadwerkelijk de vorige en de vorige slide. Dat is niet erg, maar dat is wel wat je zou verwachten als je variablen globaal beschikbaar maakt.

    Ook maak je een verschil tussen prev en next, door bij de ene next() en bij de andere prev(‘div’) te doen, dit kan onverwachte resultaten geven omdat je next button met alle elementen werkt en je prev button alleen met div elementen als “slide”.

    Verder leuk artikel, heb je een voorbeeld linkje?

  • Mark - 9/08/2012

    Bedankt Reen, inderdaad het nog korter gekund blijkbaar.
    Zal je iets laten weten als het voorbeeld live staat.

Ook een reactie geven!!

Je email is nodig en zal nooit worden weer- of doorgegeven.