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
Related
I'm having some issues trying to make an overflowed container I've created in Divi draggable.
After researching I found a few templates that related to what I was looking for. However, wouldn't work due to the way the container has to be created within the theme.
I've added a link to the website development below so you are able to see the way the container has been set-up. Any advise on how I can achieve my desired outcome would be appreciated.
Example of what I'm trying to achieve
https://codepen.io/toddwebdev/pen/yExKoj
Development website
https://snapstaging.co.uk/thesnapagency/about/
Container layout
<div class="section">
<div class="row">
<div class="column">
<div class="module">
<div class="container">
<div class="items">
<div class="project-item">
<img src="https://snapstaging.co.uk/thesnapagency/wp-content/uploads/2020/07/delphinium-thumbnail.jpg" />
<h1>Project</h1>
</div>
<div class="project-item">
<img src="https://snapstaging.co.uk/thesnapagency/wp-content/uploads/2020/07/delphinium-thumbnail.jpg" />
<h1>Project</h1>
</div>
<div class="project-item">
<img src="https://snapstaging.co.uk/thesnapagency/wp-content/uploads/2020/07/delphinium-thumbnail.jpg" />
<h1>Project</h1>
</div>
<div class="project-item">
<img src="https://snapstaging.co.uk/thesnapagency/wp-content/uploads/2020/07/delphinium-thumbnail.jpg" />
<h1>Project</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Should be fine if you changed the styling a bit.
give the container (div with draggable on your webpage )
overflow-x: auto;
width: 100%;
and set the width of it's child (row)
width: 2500px;
Then whenever you use that codepen you should be good.
<div class="et_pb_row et_pb_row_7 draggable" style="
overflow-x: auto;
width: 100%;
">
<div class="et_pb_column et_pb_column_4_4 et_pb_column_17 et_pb_css_mix_blend_mode_passthrough et-last-child" style="
width: 2500px;
">
Items here
</div>
</div>
I have a group of images on which I have used slick lightbox.
https://github.com/mreq/slick-lightbox
I am currently working for an arabic site and that is why I want the carousel to work in Right-to-left direction.When I put the dir="html" attribute in the html tag,it breaks the carousel.It works with the rtl tag strictly on the parent of slick lightbox.
Codepen : https://codepen.io/shivanit2/pen/jQBrwB
HTML markup
<html dir="rtl">
<body>
<div class="content">
<h1 class="content-title">Gallery</h1>
<div class="gallery js-gallery">
<div class="gallery-item">
<div class="gallery-img-holder js-gallery-popup">
<img src="https://picsum.photos/600/500" alt="" class="gallery-img">
</div>
</div>
<div class="gallery-item">
<div class="gallery-img-holder js-gallery-popup">
<img src="https://picsum.photos/700/500" alt="" class="gallery-img">
</div>
</div>
<div class="gallery-item">
<div class="gallery-img-holder js-gallery-popup">
<img src="https://picsum.photos/800/500" alt="" class="gallery-img">
</div>
</div>
</div>
</div>
</body>
</html>
JS
$('.js-gallery').slickLightbox({
src: 'src',
itemSelector: '.js-gallery-popup img',
background: 'rgba(0, 0, 0, .7)'
});
What modifications can I do to make the plugin to support RTL?
You can add the following style rule to reset the direction.
.lg-outer {
direction: ltr;
}
I am using AOS library for animations. When I use the animation slide-left and slide-right, the width of the page becames wider that the body width, making the whole page look weird. I couldnt find any solution online and the only solution I figured out is if I give the elements which I apply the animation on a width in px (it cannot be bigger than 400px for whatever reason). However, that solution doesnt really work as it destroys up my css too. I have provided a js fiddle so you can see what I mean. Ive been spending hours on that so if anyone can help, I would be truly happy! Thanks!!
https://jsfiddle.net/Lca8n0ue/
code:
<div style="background-color:red; height:300px;"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="container-fluid">
<div class="row center-block wrapper">
<div class="col-sm-6 test" data-aos="slide-right">
<h2 class="text-center">title</h2>
<p class="text-center">app</p>
<div>
<img class="img-fluid center-block" width="350" height="320" src="http://unsplash.imgix.net/reserve/9Fx2auQ4yoHM8OpWA8qw__MG_5265.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050" alt="">
</div>
</div>
<div class="col-sm-6 test2" data-aos="slide-left">
<h2 class="text-center">title</h2>
<p class="text-center">appp</p>
<div>
<img class="img-fluid center-block" width="350" height="320" src="http://unsplash.imgix.net/reserve/9Fx2auQ4yoHM8OpWA8qw__MG_5265.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050" alt="">
</div>
</div>
<div class="col-sm-6 test" data-aos="slide-right">
<h2 class="text-center">title</h2>
<p class="text-center">app</p>
<div>
<img class="img-fluid center-block" width="350" height="320" src="http://unsplash.imgix.net/reserve/9Fx2auQ4yoHM8OpWA8qw__MG_5265.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050" alt="">
</div>
</div>
<div class="col-sm-6 test2" data-aos="slide-left">
<h2 class="text-center">title</h2>
<p class="text-center">appp</p>
<div>
<img class="img-fluid center-block" width="350" height="320" src="http://unsplash.imgix.net/reserve/9Fx2auQ4yoHM8OpWA8qw__MG_5265.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050" alt="">
</div>
</div>
</div>
</div>
js:
AOS.init();
ONLY THING THAT HELPS BUT RUINS CSS IS:
.test{
width: 400px;
}
.test2{
width: 400px;
}
Although I'm not completely sure WHY is it so (I had the same problem a lot of time) there is another way to fix this.
Just set overflow-x: hidden on the parent element.
In your case this would be .container-fluid.
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
I have one vertical slider page.
in every slide I have one image and I have iphone container.
like
now this page slides vertically show next slides comes in center and its also contains image on center.
now I want something like that image only displayed when its comes in iphone container.
as here in second image my images showing even out of iphone container so I dont want to do that
my code
<div style="display: block; position: fixed; top: 14.5px; left: 684px;" class="iphone_container"><img title="" src="/img/iphon.png"></div>
<div class="port_list">
<div class="port_wrap" id="slide_1" style="background-color: #344a18;position: relative">
<div class="proj_brief"></div>
<div class="">
<div class="">
<img src="" />
</div>
</div>
</div>
<div class="port_wrap" id="slide_1" style="background-color: #344a18;position: relative">
<div class="proj_brief"></div>
<div class="">
<div class="">
<img src="" />
</div>
</div>
</div>
<div class="port_wrap" id="slide_1" style="background-color: #344a18;position: relative">
<div class="proj_brief"></div>
<div class="">
<div class="">
<img src="" />
</div>
</div>
</div>
</div>
You create a container div for your phone and put there a div for the sildes. with overflow:hidden you can hide the additional content.
<div id="phone">
<div id="slides">
<img src="pic1.png" />
<img src="pic2.png" />
<img src="pic3.png" />
</div>
</div>
<input type="button" value="slide up" onclick="slide('up')" />
<input type="button" value="slide down" onclick="slide('down')" />
Check this fiddle: http://jsfiddle.net/qfzBk/2/