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,
MarcelBekijk bijlage 328895
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,
MarcelBekijk bijlage 328895
Laatst bewerkt: