Toon posts:

HTML5/CSS carrousel met linkje

Pagina: 1
Acties:

Vraag


  • theorganiser
  • Registratie: Juni 2007
  • Laatst online: 20:14
Hi allemaal,
ik ben bezig met een website te maken in HTML5

nu heb ik een Carrousel hierin zitten en dit werkt goed.
ik wil echter dat de plaatjes in de carrousel clickable zijn naar een andere link.
ik heb nu de volgende code :

echter onderin gaat goed( oude situatie)
bovenin worden de plaatjes echter helemaal uitgerekt en verknipt aan de container waar het instaat


code:
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
[b]<div class="cycle-slideshow" 
    data-cycle-fx=carousel
    data-cycle-timeout=3000
    data-cycle-carousel-visible=1
    data-cycle-carousel-fluid=true
    data-cycle-slides="> a"
    >
     <a href="https://malsup.github.io/images/p1.jpg">
    <img src="images/carrousel/carrousel1.jpg">
    </a>
    <a href="https://malsup.github.io/images/p2.jpg">
    <img src="images/carrousel/carrousel2.jpg">
    </a>
</div>[/b]
        
<div class="cycle-slideshow" 
    data-cycle-fx=carousel
    data-cycle-timeout=3000
    data-cycle-carousel-visible=1
    data-cycle-carousel-fluid=true
    >
    <img src="images/carrousel/carrousel1.jpg">
    <img src="images/carrousel/carrousel2.jpg">
    <img src="images/carrousel/carrousel3.jpg">
    <img src="images/carrousel/carrousel4.jpg">
                        
</div>


wie ziet er wat er fout gaat en kan een tweaker die helemaal gek geworden is helpen 8)7 :?

[Voor 3% gewijzigd door theorganiser op 06-01-2022 16:05]

Beste antwoord (via theorganiser op 07-01-2022 23:20)


  • W99
  • Registratie: September 2015
  • Laatst online: 03-02 13:41
Ik denk dat er geen a tag omheen mag. Dan zou je met een onclick om gebruikers te gaan doorlinken.

Linkje naar voorbeeld: https://www.w3docs.com/sn...hat-acts-like-a-link.html

Alle reacties


  • AW_Bos
  • Registratie: April 2002
  • Laatst online: 23:53

AW_Bos

Liefhebber van nostalgie... 🕰️

Kom eens met een testcase aan via JSfiddle?
Dan kunnen we er makkelijker naar kijken. We hebben niet zelf een ingebouwde render-tool in ons hoofd :P

☀️ Goedemorgen zonneschijn! ☀️
☀️Ja, je maakt me zo gelukkig, en door jou voel ik me fijn! ☀️


  • flashzorrr
  • Registratie: Juli 2014
  • Niet online
Wellicht moeten je images directe children zijn van de container - dus mag je er geen <a> tag omheen zetten?

Acties:
  • Beste antwoord
  • 0Henk 'm!

  • W99
  • Registratie: September 2015
  • Laatst online: 03-02 13:41
Ik denk dat er geen a tag omheen mag. Dan zou je met een onclick om gebruikers te gaan doorlinken.

Linkje naar voorbeeld: https://www.w3docs.com/sn...hat-acts-like-a-link.html

  • DJMaze
  • Registratie: Juni 2002
  • Niet online
Je probleem is het gebruik van JavaScript.
Dat heb je niet gemeld.

Doe het eens zonder JavaScript zoals je hier kan vinden:
https://css-tricks.com/css-only-carousel/

Maak je niet druk, dat doet de compressor maar


  • theorganiser
  • Registratie: Juni 2007
  • Laatst online: 20:14
DJMaze schreef op donderdag 6 januari 2022 @ 18:58:
Je probleem is het gebruik van JavaScript.
Dat heb je niet gemeld.

Doe het eens zonder JavaScript zoals je hier kan vinden:
https://css-tricks.com/css-only-carousel/
excues, ik heb gebruik gemaakt van Cycle2 , dit is inderdaad een javascript.
aangezien ik hem reponsive wil bouwen is dit volgens mij wel nodig?
https://jquery.malsup.com/cycle2/demo/carousel.php

ik heb nu de onclick methode gebruikt en dit lijkt te werken!

[Voor 12% gewijzigd door theorganiser op 07-01-2022 23:20]


  • Reinier
  • Registratie: Februari 2000
  • Laatst online: 06:39
W99 schreef op donderdag 6 januari 2022 @ 17:18:
Ik denk dat er geen a tag omheen mag. Dan zou je met een onclick om gebruikers te gaan doorlinken.

Linkje naar voorbeeld: https://www.w3docs.com/sn...hat-acts-like-a-link.html
Ik kots op websites met zulke linkjes. Ik open altijd een miljard tabs d.m.v. middelste muisknop en dat gaat kapot bij onclick links.
Pagina: 1


Tweakers maakt gebruik van cookies

Tweakers plaatst functionele en analytische cookies voor het functioneren van de website en het verbeteren van de website-ervaring. Deze cookies zijn noodzakelijk. Om op Tweakers relevantere advertenties te tonen en om ingesloten content van derden te tonen (bijvoorbeeld video's), vragen we je toestemming. Via ingesloten content kunnen derde partijen diensten leveren en verbeteren, bezoekersstatistieken bijhouden, gepersonaliseerde content tonen, gerichte advertenties tonen en gebruikersprofielen opbouwen. Hiervoor worden apparaatgegevens, IP-adres, geolocatie en surfgedrag vastgelegd.

Meer informatie vind je in ons cookiebeleid.

Sluiten

Toestemming beheren

Hieronder kun je per doeleinde of partij toestemming geven of intrekken. Meer informatie vind je in ons cookiebeleid.

Functioneel en analytisch

Deze cookies zijn noodzakelijk voor het functioneren van de website en het verbeteren van de website-ervaring. Klik op het informatie-icoon voor meer informatie. Meer details

janee

    Relevantere advertenties

    Dit beperkt het aantal keer dat dezelfde advertentie getoond wordt (frequency capping) en maakt het mogelijk om binnen Tweakers contextuele advertenties te tonen op basis van pagina's die je hebt bezocht. Meer details

    Tweakers genereert een willekeurige unieke code als identifier. Deze data wordt niet gedeeld met adverteerders of andere derde partijen en je kunt niet buiten Tweakers gevolgd worden. Indien je bent ingelogd, wordt deze identifier gekoppeld aan je account. Indien je niet bent ingelogd, wordt deze identifier gekoppeld aan je sessie die maximaal 4 maanden actief blijft. Je kunt deze toestemming te allen tijde intrekken.

    Ingesloten content van derden

    Deze cookies kunnen door derde partijen geplaatst worden via ingesloten content. Klik op het informatie-icoon voor meer informatie over de verwerkingsdoeleinden. Meer details

    janee