What I want to do:
I have a bootstrap carousel and 5 divs. When I hover on the first div I want to show the first carousel-item...etc
What I did:
I deactivated the auto play with data-interval="false"
When hovering those controlling items, the following function is called:
function changeImage(index) {
$("#carousel").carousel(index); // index is the active carousel-item's index
}
What happened:
Before hovering on any controlling item, the carousel doesn't auto play.
After hovering on any controlling item, the carousel displays the expected carousel-item, however the carousel starts auto-playing.
What I tried:
Using Jquery I set the interval to false after each time I navigate in the carousel:
function changeImage(index) {
$("#carousel").carousel(index);
$('#carousel').carousel({
interval: false
})
}
But it didn't work.
Full code:
<div id="carousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item">
<img src="..."/>
</div>
<div class="carousel-item active">
<img src="..."/>
</div>
<div class="carousel-item">
<img src="..."/>
</div>
<div class="carousel-item">
<img src="..."/>
</div>
</div>
</div>
<div id="controls">
<div onmouseover="changeImage(0)">1</div>
<div onmouseover="changeImage(1)">2</div>
<div onmouseover="changeImage(2)">3</div>
<div onmouseover="changeImage(3)">4</div>
<div onmouseover="changeImage(4)">5</div>
</div>
<script>
$('#carousel').on('slide.bs.carousel', function () {
$('#carousel').carousel({
interval: false
})
})
function changeImage(index) {
$("#carousel").carousel(index);
}
</script>
Related
I currently have a bootstrap carousel with 3 images each image has a caption I want it so when you click on the caption on the first carousel image the image will change to a gif but it isn't working using basic JavaScript.
I want plymouthImg to change into permitionImg, currently permitionImg display is set to none!important
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img id="plymouthImg" src="imgs/plymouth1.jpg" class="d-block w-100" alt="Roland Levinsky Building">
<img id="permitionImg" src="imgs/plymouthbaw.gif" class="d-block w-100" alt="Permition">
<div class="carousel-caption d-md-block">
<h3 onclick="changeText()" class="plymouth">Welcome to the University of Plymouth</h3>
<h3 class="permition">Welcome to Permition</h3>
</div>
</div>
This is the JavaScript function on the h3
function changeText() {
const plymouthText = document.querySelector('.plymouth');
const permitionText = document.querySelector('.permition');
const plymouthImg = document.getElementById('plymouthImg');
const permitionImg = document.getElementById('permitionImg');
plymouthText.style.display = "none";
permitionText.style.display = "block";
plymouthImg.style.display = "none!important";
permitionImg.style.display = "block!important";
}
Figured it out myself so gonna leave my solution here in case anyone else has this problem. By wrapping the images in their own individual div and applying the display changes to the divs instead of the images it bypasses any styling that is overriding the JavaScript I wrote
HTML
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div id="plymouthImg">
<img src="imgs/plymouth1.jpg" class="d-block w-100" alt="Roland Levinsky Building">
</div>
<div id="permitionImg">
<img src="imgs/plymouthbaw.gif" class="d-block w-100" alt="Permition">
</div>
<div class="carousel-caption d-md-block">
<h3 onclick="changeText()" class="plymouth">Welcome to the University of Plymouth</h3>
<h3 class="permition">Welcome to Permition</h3>
</div>
JavaScript
function changeText() {
const plymouthText = document.querySelector('.plymouth');
const permitionText = document.querySelector('.permition');
const plymouthImg = document.getElementById('plymouthImg');
const permitionImg = document.getElementById('permitionImg');
plymouthText.style.display = "none";
permitionText.style.display = "block";
plymouthImg.style.display = "none";
permitionImg.style.display = "block";
}
Trying to replicate this simple jquery snippet I have from my old project into angular2. Basically selecting a carousel image index onclick="" or (click)="".
In jQuery its simple as the code below, however when I do the same in angular2 I get .carousel() is not a function. I've imported jQuery and bootstrap but the snippet below doesn't seems want to work.
// this works on plain jquery
selectImage = function() {
$('#myCarousel').carousel(2)
}
in my angular2 its pretty similar:--
import { carousel } from 'bootstrap';
import $ from "jquery";
declare var carousel: any;
// doesn't work shows the error below
selectImage() {
$('#myCarousel').carousel(2);
}
Trying to select image from this div
<button (click)="selectImage()"> Select image (2)</button>
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="./assets/imgs/4d4853533136_01-lg.jpg"></div>
<div class="item" data-slide-number="1">
<img src="./assets/imgs/4d4853533136_03.jpg"></div>
<div class="item" data-slide-number="2">
<img src="./assets/imgs/4d4853533136_02.jpg"></div>
<div class="item" data-slide-number="3">
<img src="./assets/imgs/4d4853533136_04.jpg"></div>
</div>
</div>
Error message: ERROR TypeError: __WEBPACK_IMPORTED_MODULE_3_jquery___default(...)(...).carousel is not a function
Question is how can I do the same function as my jQuery snippet in angular2?
Bootstrap select specified image number Ref
You have to use [(activeSlide)]="activeSlideIndex" as below. Set "activeSlideIndex" in your click event Or any other event as per requirement
<carousel [interval]="myInterval" [noWrap]="noWrapSlides" [(activeSlide)]="activeSlideIndex">
<slide *ngFor="let slide of slides; let index=index">
<img [src]="slide.image">
<div class="carousel-caption">
<h4>Slide {{index}}</h4>
<p>{{slide.text}}</p>
</div>
</slide>
</carousel>
I would like the Anchor-Array of the fullpage.js to be set automatically.
I would like to paste this into my WordPress theme, but i have problem with my functions. Do you have a idea? Thank you for help.
HTML
<div id="fullpage">
<div class="section" id="page-section-1"></div>
<div class="section" id="page-section-2"></div>
<div class="section" id="page-section-3"></div>
<div class="section" id="page-section-4"></div>
</div>
JS
function getAnchorarray() {
var idarray = $("#fullpage")
.find(".section")
.map(function () {
return this.id;
})
.get(); //ToArray
}
$('#fullpage').fullpage({
navigation: false,
scrollBar: true,
menu: '.main-nav',
//anchors: ["page-section-1", "page-section-2", "page-section-3", "page-section-4"],
anchors: getAnchorarray(),
responsiveWidth: 400
});
Just use the data-anchor attribute :)
As detailed in the docs:
Note that section anchors can also be defined in the same way, by using the data-anchor attribute, if no anchors array is provided.
<div class="section">
<div class="slide" data-anchor="slide1"> Slide 1 </div>
<div class="slide" data-anchor="slide2"> Slide 2 </div>
<div class="slide" data-anchor="slide3"> Slide 3 </div>
<div class="slide" data-anchor="slide4"> Slide 4 </div>
</div>
I have two bootsrap div rows. The first row contains a HTML5 video tag where I want to play video.
The second row contains JQuery Slider showing images that corresponds to the videos that need to be played by their index. The slider is using a https://github.com/kenwheeler/slick/ plugin.
If image in position 1 is clicked, I want to play video_1 in the player, and so on.
The URL of video will be in this format <source src="videos/video_1.mp4"
Here is my markup
<body style="background-color: #0094ff">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<video width="640" height="360" controls id="player">
<source src="videos\video_1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
<div class="row">
<div class="col-md-12 slider">
<div class="col-md-5 col-xs-3"><img id="image_1" src="images\guest1.jpg" alt="Image I"/></div>
<div class="col-md-5 col-xs-3"><img id="image_1" src="images\guest2.jpg" alt="Image 2"/></div>
<div class="col-md-5 col-xs-3"><img id="image_1" src="images\guest3.jpg" alt="Image 3"/></div>
<div class="col-md-5 col-xs-3"><img id="image_1" src="images\guest4.jpg" alt="Image 4"/></div>
<div class="col-md-5 col-xs-3"><img id="image_1" src="images\guest5.jpg" alt="Image 5"/></div>
<div class="col-md-5 col-xs-3"><img id="image_1" src="images\guest6.jpg" alt="Image 6"/></div>
</div>
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.slider').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
})
$('.slider').on('click', '.slick-slide', function () {
alert("Slide clicked");
//how can I show the video with the position of the clicked slide?
})
</script>
</body>
How can I show an a video using the position/index of the clicked slide to create the src="" of the video tag with the id of "player"?
UPDATE
Here is a screenshot of what the screen looks like currently, an I want to show a different video when each of the image is clicked.
To answer your question exactly do this:
$('.slider').on('click', '.slick-slide', function () {
var index = $('.slider').slick('slickCurrentSlide');
$('#player source').attr('src', 'videos/video_'+index+'.mp4');
})
But better control would be:
Add a data-video to each img tag:
<div class="col-md-5 col-xs-3">
<img id="image_1" src="images\guest1.jpg" data-video="videos\video_1.mp4" alt="Image I" />
</div>
You can then swap out the video like so:
$('.slider').on('click', 'img', function () {
var data = $(this).data(); // Grab data from IMG
$('#player source').attr('src', data.video);
})
I'm trying to position the prev and next slides in a Bootstrap Carousel with CSS but the Bootstrap.js (version 3.1.1) seems to be only very briefly adding prev or next classes to adjacent slides before stripping them and adding the active class (depending on which way you swipe). In order to position the prev and next slides (and not the other slides in the sequence) I want to add the next class to the following slide and the 'prev' class to the prev slide relative to the current slide and keep them there until the slides change:
Here is the example I'm basing it off, and here is the javascript that is used:
<script>
$(document).ready(function() {
$("#myCarousel").swiperight(function() {
$(this).carousel('prev');
});
$("#myCarousel").swipeleft(function() {
$(this).carousel('next');
});
});
</script>
The correct behavior would be the following (note the movement of the prev, active and next classes:
<div id="myCarousel" class="carousel slide">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
Slide 1
</div>
<div class="item next">
Slide 2
</div>
<div class="item">
Slide 3
</div>
<div class="item">
Slide 4
</div>
</div>
</div>
Should become:
<div id="myCarousel" class="carousel slide">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item prev">
Slide 1
</div>
<div class="item active">
Slide 2
</div>
<div class="item next">
Slide 3
</div>
<div class="item">
Slide 4
</div>
</div>
</div>
Any thoughts?
Here's a simple jquery script to add the corresponding classes after each transition:
var $carousel = $('#myCarousel'),
$carouselItems = $('.item', $carousel);
//This event is fired when the carousel has completed its slide transition.
$carousel.on('slid.bs.carousel', function (e) {
//Reset classes
$carouselItems.removeClass('prev next');
//Find current slide
var $active = $(e.relatedTarget);
//Add corresponding classes to next and prev elements
$active.next().addClass('next');
$active.prev().addClass('prev');
});
Demo fiddle