foto's in owl carousel niet zichtbaar

Status
Niet open voor verdere reacties.

1Marcel1966

Gebruiker
Lid geworden
20 aug 2018
Berichten
15
Hallo, Ik ben volledig nieuw met JS en JQuerie.
Ik heb owl carousel geinstalleerd en alle stappen volgens de instructies doorlopen, maar mijn foto's zijn niet zichtbaar.
Ik zie wel de 2 blauwe punten die aangeven dat er 2 foto's zijn. Dus lijkt het dat de carousel wel zichtbaar is, maar de foto's worden niet getoond.
Kan iemand mij vertellen wat ik verkeerd doe?
Ik werk met Bootstrap 3.3.7 omdat ik bootstrap 4 nu nog te lastig vind voor mezelf.
Ik heb de code hieronder gezet:
In de head tag:
<!-- OWL-CAROUSEL CSS -->
<link rel="stylesheet" href="css/owl-carousel/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl-carousel/owl.theme.default.min.css">

<!-- Style CSS -->
<link rel="stylesheet" href="css/styles.css">

In de body heb ik de class staan alsmede de foto's (5 in totaal, maar hier heb ik er 2 geplaatst ) die in de carousel moeten komen:
<div id="team-members" class="owl-carousel owl-theme">
<div class="team-member">
<img src="img/team/team-1.jpg" class="img-responsive" alt="team-member">
<div class="team-member-info text-center">
<h4 class="team-member-name">Daniel Watrous</h4>
<h4 class="team-member-designation">CEO</h4>
<ul class="social-list">
<li><a href="#" class="social-icon icon-grey"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#" class="social-icon icon-grey"><i class="fab fa-twitter"></i></a></li>
<li><a href="#" class="social-icon icon-grey"><i class="fab fa-google-plus"></i></a></li>
</ul>
</div>
</div>
<div class="team-member">
<img src="img/team/team-2.jpg" class="img-responsive" alt="team-member">
<div class="team-member-info text-center">
<h4 class="team-member-name">Sara Smit</h4>
<h4 class="team-member-designation">Co-Founder</h4>
<ul class="social-list">
<li><a href="#" class="social-icon icon-grey"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#" class="social-icon icon-grey"><i class="fab fa-twitter"></i></a></li>
<li><a href="#" class="social-icon icon-grey"><i class="fab fa-google-plus"></i></a></li>
</ul>
</div>
</div>
</div>


Onderaan mijn webpagina heb ik de scripts staan:
<!-- JQuery -->
<script src="js/jquery.js"></script>

<!-- Bootstrap JS -->
<script src="js/bootstrap/bootstrap.min.js"></script>

<!-- WOW JS -->
<script src="js/wow/wow.min.js"></script>

<!-- Magnific Popup JS -->
<script src="js/magnific-popup/jquery.magnific-popup.min.js"></script>

<!-- Owl-Carousel JS -->
<script src="js/owl-carousel/owl.carousel.min.js"></script>

<!-- Custom JS -->
<script src="js/custom.js"></script>

<!-- Custom JS -->
<script src="js/custom.js"></script>

En al laatste heb ik in mijn custom JS file de functie met aanroep gezet:
$(function(){
$("#team-members").owlCarousel();

});


edit: 22 aug.Opgelost. Ik heb een div op een verkeerde plaats afgesloten, waardoor de foto's niet zichtbaar werden.




met vriendelijke groet,
MarcelScreenshot.pngBekijk bijlage 328895
 
Laatst bewerkt:
Het gebruik van een CDN (in dit voorbeeld Cloudflare) heeft voordelen:
- betere performance van de pagina omdat een CDN een grote cache gebruikt.
- goed overzicht in de versies van al je extra css en javascript.
- minder gebruik van de bandbreedte en schijfopslag bij je eigen provider.

Natuurlijk is er een nadeel, namelijk dat ook een CDN soms down kan gaan maar de kans daarop is kleiner dan bij je eigen provider, dus eigenlijk is dit ook weer een voordeel.
Code:
<!-- bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- owl carousel -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
<!-- magnific-popup -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
<!-- custom -->
  <link rel="stylesheet" href="css/styles.css">

<!-- jquery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- bootstrap -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- wow -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<!-- magnific popup -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<!-- owl carousel -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<!-- custom -->
  <script src="js/custom.js"></script>
Welke CDN het beste is is een aparte discusseie maar ik denk dat elke CDN de voorkeur heeft boven je eigen provider.
Suc6. Have fun.
 
@bron,

Dank je. Ik zal me verdiepen in CDN en de voor- en nadelen hiervan
want wat gebeurt er als een nieuwe versie beschikbaar komt? Wordt dit automatisch aangepast en werkt mijn script dan nog?
Mvrgr Marcel
 
Laatst bewerkt:
Je kan bij sommige CDN's kiezen voor de laatste versie, bijv. ajax.googleapis.com/ajax/libs/jquery/latest/jquery.min.js
Dit kan je beter niet doen want dan heb je inderdaad de kans dat andere scripts niet goed werken.
Als in de <script src="...."> het versienummer is vermeld dan krijg je altijd die versie.

Mijn advies is wel om nu al de meest recente versies te gebruiken die in combinatie met BS 3.3 en jQuery 1.12 goed werken.

aanvulling
Volgens de Bootstrap website (klik) kan je ook jQuery 3 gebruiken bij Bootstrap 3.3.7. Ik zou het een stapje lager houden met jQuery versie 2.2.4. Je andere scripts, die ook recent zijn, zullen efficienter werken.
Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan