So I'm creating a image marquee for a mobile site that uses iDangerous Swiper plugin and have run into a issue when trying to use it. Following the set up based on the site, found here, I built my demo page to the exact spec of their demo. But for some reason, the function isn't running and I cant swipe to the next div. Being a mobile site, I'm using Jquery and Jquery Mobile. Any ideas?
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<!--First Slide-->
<div class="swiper-slide">
<img src="img/1.png" width="200" height="118">
</div>
<!--Second Slide-->
<div class="swiper-slide">
<img src="img/2.png" width="200" height="118">
</div>
<!--Third Slide-->
<div class="swiper-slide">
<img src="img/3.png" width="200" height="118">
</div>
<!--Fourth Slide-->
<div class="swiper-slide">
<img src="img/4.png" width="200" height="118">
</div>
<!--Fifth Slide-->
<div class="swiper-slide">
<img src="img/5.png" width="200" height="118">
</div>
</div>
</div>
<script>
$(function(){
var mySwiper = $('.swiper-container').swiper(options);
})
</script>
</body>
To use buttons for Swiper you need to use .swipeNext() and .swipePrev() methods on mySwiper object like:
<!-- Add somewhere in HTML your buttons:-->
<span class="button-next">Next button</span>
<span class="button-prev">Previous button</span>
<script>
$(function(){
var mySwiper = $('.swiper-container').swiper();
//"Next" button - some HTML element with "button-next" class
$('.button-next').click(function(){mySwiper.swipeNext()})
//"Prev" button - some HTML element with "button-prev" class
$('.button-prev').click(function(){mySwiper.swipePrev()})
})
</script>
iDangero.us here!:) Your HTML is correct. But what is "options" in your example? this should be an object with parameters or if you want to use default options then just remove "options" word from your example like: var mySwiper=$('.swiper-container').swiper()
Related
i start to learn about Web and make example page
i use swiper in javascript and that swiper is work, but all slide exhibit when that slide does not in center.
what attribute need to code?
Actual page
and this my js page
new Swiper('.notice-line .swiper-container', {
direction: 'vertical',
autoplay: true,
loop: true
});
html page
<div class="inner__left">
<h2>공지사항</h2>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
크리스마스 & 연말연시 스타벅스 매장 영업시간 변경 안내
</div>
<div class="swiper-slide">
[당첨자 발표] 2021 스타벅스 플래너 영수증 이벤트
</div>
<div class="swiper-slide">
스타벅스커피 코리아 애플리케이션 버전 업데이트 안내
</div>
<div class="swiper-slide">
[당첨자 발표] 뉴이어 전자영수증 이벤트
</div>
</div>
</div>
<a href="javascript:void(0)" class="notice-line__more">
<div class="material-icons">
<span class="material-symbols-outlined">add_circle</span>
</div>
</a>
</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 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 would like a simple code using plain html5 and JavaScript/jQuery (without plugins) that upon clicking on an image of a list of images, the clicked image will be shown in a larger image area above.
Here is a HTML snippet:
<!-- Large image holder -->
<div class="large-picture-left">
<p>Property View</p>
<!-- Initially the default picture for the property will be shown -->
<img src="../images/properties/f0001-default.jpg" alt="Property Picture"></a>
</div>
<!-- Text info for the current larger picture -->
<div class="large-picture-left-text">
<br><br>
<!-- Initial default info for default picture -->
<p>Location: <b>London</b></p>
<p>Bedrooms: <b>2</b></p>
<p>Type: <b>Flat</b></p>
<p>Price: <b>£365,000</b></p>
<p>Ref: <b>F0001</b></p>
</div>
</div>
<div style="clear: both"></div>
<br><br>
<div class="container">
<div class="picture-range">
<h2>Photo Range</h2>
<!-- When one of the images below is clicked, to have it shown in the large-picture-left class image holder-->
<div class="img">
<img src="../images/properties/f0001-default.jpg" alt="Default" width="300" height="200">
<div class="desc">Outside<br>5m<sup>2</</sup></div>
</div>
<div class="img">
<img src="../images/properties/f0001-bed1.jpg" alt="Bedroom 1" width="300" height="200">
<div class="desc">Bed 1<br>3m<sup>2</</sup></div>
</div>
<div class="img">
<img src="../images/properties/f0001-bed2.jpg" alt="Bedroom 2" width="300" height="200">
<div class="desc">Bed 2<br>10m<sup>2</</sup></div>
</div>
<div class="img">
<img src="../images/properties/f0001-lounge.jpg" alt="Lounge" width="300" height="200">
<div class="desc">Lounge<br>4m<sup>2</</sup></div>
</div>
<div class="img">
<img src="../images/properties/f0001-kitchen.jpg" alt="Kitchen" width="300" height="200">
<div class="desc">Kitchen<br>3m<sup>2</</sup></div>
</div>
<div class="img">
<img src="../images/properties/f0001-bathroom.jpg" alt="Bathroom" width="300" height="200">
<div class="desc">Bathroom<br>25m<sup>2</</sup></div>
</div>
</div>
</div>
<div style="clear: both"></div>
So, initially the above code will display the default outside photo in the larger area. However, I'm having problems in that, if one of the range pictures is selected, to have the initial default larger photo replaced by the selected picture (and if possible to also have the default photo info replaced by the selected picture info).
Thanks for any help.
This should work
$(document).on("click", ".img", function() {
var newImage = $(this).find("src").attr("src");
var currentImage = $(".large-picture-left img").attr.("src");
$(".large-picture-left img").attr("src", newImage);
$(this).find("src").attr("src", currentImage);
});
I'd like to use the ContentFlow Javascript tool to display TEXT and other types of HTML rather than images. The documentation says it's possible but I have yet to discover how it works. Check out my test page which just doesn't load when the content is something other than images. Code from this page follows. Any thoughts?
<Html>
<script language="JavaScript" type="text/javascript" src="contentflow.js"></script>
<div class="ContentFlow">
<div class="loadIndicator"><div class="indicator"></div></div>
<div class="flow">
<div class="item" src="" title="">test content</div>
<img class="item" src="http://jquery.bassistance.de/plugins/thickbox/images/plant4.jpg" title="Your_Image_Title"/>
<img class="item" src="http://www.wired.com/images/article/magazine/1705/st_alphageek_f.jpg" title="Your_Image_Title"/>
<img class="item" src="http://jquery.bassistance.de/plugins/thickbox/images/plant4.jpg" title="Your_Image_Title"/>
<img class="item" src="http://www.wired.com/images/article/magazine/1705/st_alphageek_f.jpg" title="Your_Image_Title"/>
<img class="item" src="http://jquery.bassistance.de/plugins/thickbox/images/plant4.jpg" title="Your_Image_Title"/>
</div>
<div class="globalCaption"></div>
<div class="scrollbar"><div class="slider"><div class="position"></div></div></div>
</div>
I had the same problem. What you have to do is put an inner div inside the ".item" div like this:
<div class="item"><div class="content">Text content to display</div></div>
As a caution, the docs say that the ".item" container itself will be scaled to be a particular size, but the text will NOT be scaled...sometimes leads to funny-looking stuff if you don't watch it carefully.
I think it should be as simple as the following:
<div class="ContentFlow">
<div class="loadIndicator"><div class="indicator"></div></div>
<div class="flow">
<div class="item">test content</div>
<div class="item">test content2</div>
<div class="item">test content3</div>
<div class="item">test content4</div>
<div class="item">
<a href="http://stackoverflow.com">
<span>this is also test content</span>
</a>
</div>
</div>
<div class="globalCaption"></div>
<div class="scrollbar"><div class="slider"><div class="position"></div></div></div>
</div>