Image slider in CSS of JS: wat is beter?

[sweebee]

Ik ben bezig met een nieuwe website voor mijzelf: website is niet relevant

Nu heb ik op de homepage een grote foto, eerst had ik hier een slider doormiddel van css, maar deze werkte bijv. traag op mobiele devices.

Nu wil ik het liefst een mooie slider die ook goed werkt op mobiele devices. Weet niet of bijv javascript beter hier in is dan css?

[ Voor 5% gewijzigd door BtM909 op 09-01-2014 18:48 ]

[BtM909]

Heb je zelf ook een beetje rondgezocht? Wat ben je tegengekomen? Waarom was dat geen antwoord op je vraag?

HEt is natuurlijk wel de bedoeling dat je een klein beetje (meer) moeite doet om je probleem uiteen te zetten

---

Kort gezegd: CSS zou altijd vloeiender moeten zijn omdat dat leunt op hardware(acceleratie), maar wat je vaak ziet is een combi van CSS(3) waar ondersteunt en JS als fallback.

[sweebee]

Ik heb op dit moment een werkende slider met javascript. Alleen wanneer ik de img width op 100% zet zou die de volle breedte van de pagina moeten gebruiken, maar op dit moment negeert die dat gewoon?

zie mijn homepage

[NMe]

Als je nou eens een stukje (relevante, dus niet alle!) code post is er misschien ook nog écht iemand geneigd om naar je probleem te kijken.

[sweebee]

ik heb deze slider gevonden (http://codepen.io/atu11111/pen/jwGtL). Deze heeft een vaste breedte maar die moet 100% worden. Wanneer ik dat doe verdwijnt alles.

HTML:

<ul class="slides">
    <input type="radio" name="radio-btn" id="img-1" checked />
    <li class="slide-container">
        <div class="slide">
            <img src="http://farm9.staticflickr.com/8072/8346734966_f9cd7d0941_z.jpg" />
        </div>
        <div class="nav">
            <label for="img-6" class="prev">&#x2039;</label>
            <label for="img-2" class="next">&#x203a;</label>
        </div>
    </li>

    <input type="radio" name="radio-btn" id="img-2" />
    <li class="slide-container">
        <div class="slide">
          <img src="http://farm9.staticflickr.com/8504/8365873811_d32571df3d_z.jpg" />
        </div>
        <div class="nav">
            <label for="img-1" class="prev">&#x2039;</label>
            <label for="img-3" class="next">&#x203a;</label>
        </div>
    </li>

    <input type="radio" name="radio-btn" id="img-3" />
    <li class="slide-container">
        <div class="slide">
          <img src="http://farm9.staticflickr.com/8068/8250438572_d1a5917072_z.jpg" />
        </div>
        <div class="nav">
            <label for="img-2" class="prev">&#x2039;</label>
            <label for="img-4" class="next">&#x203a;</label>
        </div>
    </li>

    <input type="radio" name="radio-btn" id="img-4" />
    <li class="slide-container">
        <div class="slide">
          <img src="http://farm9.staticflickr.com/8061/8237246833_54d8fa37f0_z.jpg" />
        </div>
        <div class="nav">
            <label for="img-3" class="prev">&#x2039;</label>
            <label for="img-5" class="next">&#x203a;</label>
        </div>
    </li>

    <input type="radio" name="radio-btn" id="img-5" />
    <li class="slide-container">
        <div class="slide">
          <img src="http://farm9.staticflickr.com/8055/8098750623_66292a35c0_z.jpg" />
        </div>
        <div class="nav">
            <label for="img-4" class="prev">&#x2039;</label>
            <label for="img-6" class="next">&#x203a;</label>
        </div>
    </li>

    <input type="radio" name="radio-btn" id="img-6" />
    <li class="slide-container">
        <div class="slide">
          <img src="http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" />
        </div>
        <div class="nav">
            <label for="img-5" class="prev">&#x2039;</label>
            <label for="img-1" class="next">&#x203a;</label>
        </div>
    </li>

    <li class="nav-dots">
      <label for="img-1" class="nav-dot" id="img-dot-1"></label>
      <label for="img-2" class="nav-dot" id="img-dot-2"></label>
      <label for="img-3" class="nav-dot" id="img-dot-3"></label>
      <label for="img-4" class="nav-dot" id="img-dot-4"></label>
      <label for="img-5" class="nav-dot" id="img-dot-5"></label>
      <label for="img-6" class="nav-dot" id="img-dot-6"></label>
    </li>
</ul>

CSS:

Cascading Stylesheet:

@import url(http://fonts.googleapis.com/css?family=Varela+Round);

html, body { background: #333 url("http://codepen.io/images/classy_fabric.png"); }

.slides {
    padding: 0;
    width: 609px;
    height: 420px;
    display: block;
    margin: 0 auto;
    position: relative;
}

.slides * {
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.slides input { display: none; }

.slide-container { display: block; }

.slide {
    top: 0;
    opacity: 0;
    width: 609px;
    height: 420px;
    display: block;
    position: absolute;

    transform: scale(0);

    transition: all .7s ease-in-out;
}

.slide img {
    width: 100%;
    height: 100%;
}

.nav label {
    width: 200px;
    height: 100%;
    display: none;
    position: absolute;

      opacity: 0;
    z-index: 9;
    cursor: pointer;

    transition: opacity .2s;

    color: #FFF;
    font-size: 156pt;
    text-align: center;
    line-height: 380px;
    font-family: "Varela Round", sans-serif;
    background-color: rgba(255, 255, 255, .3);
    text-shadow: 0px 0px 15px rgb(119, 119, 119);
}

.slide:hover + .nav label { opacity: 0.5; }

.nav label:hover { opacity: 1; }

.nav .next { right: 0; }

input:checked + .slide-container  .slide {
    opacity: 1;

    transform: scale(1);

    transition: opacity 1s ease-in-out;
}

input:checked + .slide-container .nav label { display: block; }

.nav-dots {
    width: 100%;
    bottom: 9px;
    height: 11px;
    display: block;
    position: absolute;
    text-align: center;
}

.nav-dots .nav-dot {
    top: -5px;
    width: 11px;
    height: 11px;
    margin: 0 4px;
    position: relative;
    border-radius: 100%;
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.6);
}

.nav-dots .nav-dot:hover {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.8);
}

input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3,
input#img-4:checked ~ .nav-dots label#img-dot-4,
input#img-5:checked ~ .nav-dots label#img-dot-5,
input#img-6:checked ~ .nav-dots label#img-dot-6 {
    background: rgba(0, 0, 0, 0.8);
}

[ Voor 0% gewijzigd door BtM909 op 10-01-2014 00:03 ]

[Maverick2001]

Ik ken het hele script niet maar misschien moet je een alternatief zoeken.
Is je site wel responsive? Het wordt me niet helemaal duidelijk uit je verhaal.

Misschien eens kijken naar OwlCarousel deze heeft veel opties en is ook volledige responsive.

[sweebee]

Mijn site is helemaal responsive. Ik heb inmiddels de slider eruit gegooid (kost ook meer bandbreedte voor mobiel) en een load random image on pageload script erin gezet.

[RobIII]

sweebee schreef op donderdag 09 januari 2014 @ 19:18:
ik heb deze slider gevonden (http://codepen.io/atu11111/pen/jwGtL).

...en vervolgens kopieer je dat hele ding verbatim (HTML + CSS)
Wat was er niet duidelijk aan NMe in "Image slider in CSS of JS: wat is beter?"

Daarbij geven we geen support op code van derden; daarvoor mag je bij die derden aankloppen. En dan hebben we scriptrequest nog niet aangehaald, noch je eigen inzet (en dat is dan weer een Kan iemand even...?). Ik lees namelijk niets anders dan "het werkt niet" waarbij je wát je precies allemaal geprobeerd hebt, if anything at all, om zélf tot een oplossing te komen achterwege laat. We willen (en kunnen) je best helpen, maar een beetje eigen inzet wordt hier toch wel verwacht.

[edit]
Zie ook RobIII in "Timer script iframe"

[ Voor 9% gewijzigd door RobIII op 10-01-2014 01:17 ]