부트 스트랩 캐 러셀 슬라이더를 모바일 왼쪽 / 오른쪽 스 와이프를 사용하도록 만드는 방법
<div class="col-md-4">
<!--Carousel-->
<div id="sidebar-carousel-1" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators grey">
<li data-target="#sidebar-carousel-1" data-slide-to="0" class="active"></li>
<li data-target="#sidebar-carousel-1" data-slide-to="1"></li>
<li data-target="#sidebar-carousel-1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<a href="" data-lightbox="image-1" title="">
<img src="http://shrani.si/f/3D/13b/1rt3lPab/2/img1.jpg" alt="...">
</a>
</div>
<div class="item">
<a href="" data-lightbox="image-1" title="">
<img src="http://shrani.si/f/S/jE/UcTuhZ6/1/img2.jpg" alt="...">
</a> </div>
<div class="item">
<a href="" data-lightbox="image-1" title="">
<img src="http://shrani.si/f/h/To/1yjUEZbP/img3.jpg" alt="...">
</a> </div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#sidebar-carousel-1" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#sidebar-carousel-1" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!--/Carousel--></div>
내가하고 싶은 것은 모바일 장치에만 왼쪽 / 오른쪽 터치 스 와이프 기능을 추가하는 것입니다. 어떻게 할 수 있습니까?
또한 마우스 오버시 나타나는 이전 / 다음 버튼을 모바일 / ipad 버전의 경우 더 작게 만들려면 어떻게해야합니까?
감사
최신 정보:
웹 디자인을 처음 접했을 때이 솔루션을 생각해 냈습니다. 이제 내가 더 늙고 현명 해 졌기 때문에 Mark Shiraldi 가 한 대답 이 더 나은 선택 인 것 같습니다. 다음 상위 답변을 참조하십시오. 더 생산적인 솔루션입니다.
최근에 한 프로젝트에서 작업했는데이 예제는 완벽하게 작동했습니다. 아래 링크를드립니다.
먼저 jQuery 모바일을 추가해야합니다.
이렇게하면 터치 기능이 추가되고 스 와이프와 같은 이벤트를 만들면됩니다.
<script>
$(document).ready(function() {
$("#myCarousel").swiperight(function() {
$(this).carousel('prev');
});
$("#myCarousel").swipeleft(function() {
$(this).carousel('next');
});
});
</script>
링크는 아래에서 내가 사용한 튜토리얼을 찾을 수 있습니다.
http://lazcreative.com/blog/how-to/how-to-adding-swipe-support-to-bootstraps-carousel/
이 기능을 최근에 작업중인 프로젝트에 추가해야 했고이 문제를 해결하기 위해 jQuery Mobile을 추가하는 것이 과잉 인 것처럼 보였기 때문에 해결책을 찾아 github : bcSwipe (Bootstrap Carousel Swipe) 에 넣었습니다 .
경량 jQuery 플러그인 (최대 600 바이트 축소 vs. jQuery Mobile 터치 이벤트 8kb)이며 Android 및 iOS에서 테스트되었습니다.
사용 방법은 다음과 같습니다.
$('.carousel').bcSwipe({ threshold: 50 });
나는 파티에 조금 늦었지만 여기에 내가 사용해온 jQuery가 약간 있습니다.
$(".carousel").on("touchstart", function(event){
var xClick = event.originalEvent.touches[0].pageX;
$(this).one("touchmove", function(event){
var xMove = event.originalEvent.touches[0].pageX;
if( Math.floor(xClick - xMove) > 5 ){
$(this).carousel('next');
}
else if( Math.floor(xClick - xMove) < -5 ){
$(this).carousel('prev');
}
});
$(".carousel").on("touchend", function(){
$(this).off("touchmove");
});
});
jQuery 모바일이나 다른 플러그인이 필요하지 않습니다. 스 와이프 감도를 조정해야하는 경우 5및을 조정하십시오 -5. 이것이 누군가를 돕기를 바랍니다.
See this solution: Bootstrap TouchCarousel. A drop-in perfection for Twitter Bootstrap's Carousel (v3) to enable gestures on touch devices. http://ixisio.github.io/bootstrap-touch-carousel/
If you don't want to use jQuery mobile as like me. You can use Hammer.js
It's mostly like jQuery Mobile without unnecessary code.
$(document).ready(function() {
Hammer(myCarousel).on("swipeleft", function(){
$(this).carousel('next');
});
Hammer(myCarousel).on("swiperight", function(){
$(this).carousel('prev');
});
});
Checked solution is not accurate, sometimes mouse-right-click triggers right-swipe. after trying different plugins for swipe i found an almost perfect one.
i said "almost" because this plugin does not support future elements. so we would have to reinitialize the swipe call when the swipe content is changed by ajax or something. this plugin have lots of options to play with touch events like multi-finger-touch,pinch etc.
http://labs.rampinteractive.co.uk/touchSwipe/demos/index.html
solution 1 :
$("#myCarousel").swipe( {
swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
if(direction=='left'){
$(this).carousel('next');
}else if(direction=='right'){
$(this).carousel('prev');
}
}
});
solution 2:(for future element case)
function addSwipeTo(selector){
$(selector).swipe("destroy");
$(selector).swipe( {
swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
if(direction=='left'){
$(this).carousel('next');
}else if(direction=='right'){
$(this).carousel('prev');
}
}
});
}
addSwipeTo("#myCarousel");
For anyone finding this, swipe on carousel appears to be native as of about 5 days ago (20 Oct 2018) as per
https://github.com/twbs/bootstrap/pull/25776
https://deploy-preview-25776--twbs-bootstrap4.netlify.com/docs/4.1/components/carousel/
Same functionality I prefer than using much heavy jQuery mobile is Carousel Swipe. I suggest directly jump in to source code on github, and copy file carousel-swipe.js in to your project directory.
Use swiper events as bellow:
$('#carousel-example-generic').carousel({
interval: false
});
With bootstrap 4.2 its now very easy, you just need to pass the touch option in the carousel div as data-touch="true", as it accepts Boolean value only.
As in your case update bootstrap to 4.2 and paste(Or download source files) the following in exact order :
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
and then add the touch option in your bootstrap carousel div
<div id="sidebar-carousel-1" class="carousel slide" data-ride="carousel" data-touch="true">
'Programing' 카테고리의 다른 글
| foldr는 어떻게 작동합니까? (0) | 2020.12.06 |
|---|---|
| Swift에서 파일 확장자에서 파일 이름을 분할하는 방법은 무엇입니까? (0) | 2020.12.06 |
| MySQL에서 나이 계산 (InnoDb) (0) | 2020.12.06 |
| iPhone UILabel 텍스트 부드러운 그림자 (0) | 2020.12.06 |
| Android 데이터베이스 커서보기 (0) | 2020.12.06 |