Develop Reference

Random next image in carousel

I have a very basic carousel images slider. I also have a folder with all the images y want to show in the slides
<div class="row">
<div class="col" style="float: none;">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://cdn.pixabay.com/photo/2012/08/27/14/19/mountains-55067__340.png" class="rounded mx-auto d-block" style="height: 100vh;">
</div>
<div class="carousel-item">
<img src="https://iso.500px.com/wp-content/uploads/2014/07/big-one.jpg" class="rounded mx-auto d-block" style="height: 100vh;">
</div>
</div>
</div>
</div>
</div>
What I'd like to know is if is there some way to randomly choose the next image for the carousel from my pool images folder with out specifying by hand in the code?
I'm trying to find something but I haven't had luck yet

How to cycle a class through siblings on an event

I am working on a full screen carousel, I want the captions to be images, I couldn't find an appropriate plugin. So I am building a custom solution.
I figured out how to trigger an event during slide change. Now I want the visible class to cycle through divs with .caption under div.carousel-captions
<div id="mycarousel" class="carousel slide carousel-fade" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="images/slide2.jpg" data-color="firebrick" alt="Second Image">
</div>
<div class="item">
<img src="images/slide3.jpg" data-color="violet" alt="Third Image">
</div>
<div class="item">
<img src="images/slide4.jpg" data-color="lightgreen" alt="Fourth Image">
</div>
</div>
</div>
<div class="row">
<div class="carousel-captions">
<div class="caption visible">
<img src="images/banner2-text.png" alt="" class="img-responsive" />
</div>
<div class="caption second">
<img src="images/banner3-text.png" alt="" class="img-responsive" />
</div>
<div class="caption third">
<img src="images/banner4-text.png" alt="" class="img-responsive" />
</div>
</div>
</div>
The first caption is hiding properly with following jquery but how do I cycle through all the captions for each slides.
// Js
$('#myCarousel').on('slid.bs.carousel', function () {
$('.caption.visible').removeClass('visible');
})

Edit (just realized that you're actualy using bootstrap carousel)
Indicate which slide item is currently shown (by :visible or .active class), then grab its index and show .caption at the same index, using .eq(index)
$('#myCarousel').on('slid.bs.carousel', function(){
var i = $('.item.active').index(); // or: $('.item:visible').index();
$('.caption').removeClass('visible').eq(i).addClass('visible');
});
JSFiddle Demo

How to make a div scroll over carousel Bootstrap

Say I have a carousel and a container right under it. How do i make the container scroll ontop of the carousel? Sort of like a parallax effect I guess.
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
</div>
<div class="item">
<div >
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-4">
<p>123</p>
</div>
<div class="col-lg-4">
<p>456</p>
</div>
<div class="col-lg-4">
<p>789</p>
</div>
</div>
</div>
something like in this site http://themenectar.com/demo/salient-promo/

I think you can use this codepen idea : http://codepen.io/JTParrett/pen/BkDie
You will set it up like that :
<div class="box" data-scroll-speed="2">S</div>
The highest data-scroll-speed is, the slowest it will scroll.
You'll require jQuery, but the result would be something like that :
https://jsfiddle.net/mk0hdtsj/2

How can I switch items in bootstrap carousel by clicking a hyperlinks on webpage?

I have a fiddle like this http://jsfiddle.net/roxds51h/2/ - there is macbook pro with embedded carousel that contains two pictures. User can switch the pictures by clicking the white dots on the screen. I want to remove the dots and give the possibility of changing pictures by clicking the texts below:
<div class="row">
<div class="col-sm-6">
here is one text //after clicking that
//the first picture should
//appear on macbook
</div>
<div class="col-sm-6">
here is second text //after clicking that
//the second picture should
//appear on macbook
</div>
</div>
How can I do that?
Also, now the pictures are changing automatically every couple seconds - how can I disable it?
Thanks!

You can easily achieve that with this code:
<div class="row">
<div class="col-sm-6" data-target="#17" data-slide-to="0">
here is one text
</div>
<div class="col-sm-6" data-target="#17" data-slide-to="1">
here is second text
</div>
</div>
To disable autoplay change data-interval="5000" to data-interval="false".
<div id="17" class="carousel slide" data-interval="false" data-ride="carousel">
Removing white dots:
Remove them from HTML, I mean this code:
<ol class="carousel-indicators">
<li data-target="#17" data-slide-to="0" class=""></li>
<li data-target="#17" data-slide-to="1" class="active"></li>
</ol>

you need to swap the data target and warp your text in <a></a> tags.
HTML:
<section class="introSection">
<!-- Container -->
<div class="container macbook">
<div class="row">
<div align="center">
<img alt="" src="http://www.proalab.com/assets/macbookpro.png" class="mackbook_image">
</div>
<div class="mackbook">
<div id="17" class="carousel slide" data-interval="5000" data-ride="carousel">
<div class="carousel-inner">
<div class="item">
<img alt="Grey" src="http://www.proalab.com/assets/projects/uanz/uanz1.png" style="display: block;">
</div>
<div class="item active">
<img alt="Grey" src="http://www.proalab.com/assets/projects/uanz/uanz2.png">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
here is one text
</div>
<div class="col-sm-6">
here is second text
</div>
</div>
</section>
CodePen Demo

Twitter Bootstrap Carousel Height goes to 0px and extra div appears

I have a strange problem with Twitter Bootstrap Carousel. Please have a look at http://www.bettondesignwork.co.uk/cheapbeds4u/
At the moment there are three identical images. The first image loads OK but when the second image slides in the height of the containing div animates to 0px. As well as this an extra div is generated around the carousel .
Actual html:
<section id="top" class="container">
<div id="TopCarousel" class="moduletable carousel slide">
<div class="carousel-inner">
<div class="item">
<img src="images/slideshow/homepage/01.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="images/slideshow/homepage/02.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="images/slideshow/homepage/03.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
</div>
</div>
</section>
Rendered HTML:
<section id="top" class="container">
<div style="margin: 0px 0px 20px; position: relative; overflow: hidden; height: 0px;">
<div id="TopCarousel" class="moduletable carousel slide" style="margin: -340px 0px 0px; overflow: hidden;">
<div class="carousel-inner">
<div class="item active">
<img src="images/slideshow/homepage/01.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="images/slideshow/homepage/02.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="images/slideshow/homepage/03.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
</div>
</div>
</div>
</section>
Any help would be greatly appreciated. Thank you.

This is a problem with Joomla 3.0 and the Bootstrap carousel function. As pointed out in the comment above Mootools and jQuery run together by default on a J3 install.
The fix for me was to install and activate this plugin - http://extensions.joomla.org/extensions/core-enhancements/performance/mootools/15748
This fixes the problem for me as can be seen here:
http://www.littledonkey.net
Beware though that this disables mootools completely so somethings may stop working as expected...
Cheers,
Adam