Check alle échte Black Friday-deals Ook zo moe van nepaanbiedingen? Wij laten alleen échte deals zien

Image slider in CSS of JS: wat is beter?

Pagina: 1
Acties:
  • 398 views

  • sweebee
  • Registratie: Oktober 2008
  • Laatst online: 11:12
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
  • Registratie: Juni 2000
  • Niet online

BtM909

Watch out Guys...

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.

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.


  • sweebee
  • Registratie: Oktober 2008
  • Laatst online: 11:12
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
  • Registratie: Februari 2004
  • Laatst online: 20-11 11:59

NMe

Quia Ego Sic Dico.

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. :)

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.


  • sweebee
  • Registratie: Oktober 2008
  • Laatst online: 11:12
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
@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
  • Registratie: Februari 2001
  • Laatst online: 20-11 21:07

Maverick2001

Never look back

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.

Pura Vida


  • sweebee
  • Registratie: Oktober 2008
  • Laatst online: 11:12
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
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
...en vervolgens kopieer je dat hele ding verbatim (HTML + CSS) :X
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 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

Pagina: 1

Dit topic is gesloten.