i tried to add owl carousel in laravel project but when i add it to foreach the image is not showing. if the image is static it can appear. screenshoot
This my code
<div class="owl-carousel owl-theme">
#php
$incrementCategory = 0
#endphp
#forelse ( $categories as $category )
<div
class="col-6 col-md-3 col-lg-2"
data-aos="fade-up"
data-aos-delay="{{ $incrementCategory += 100 }}"
>
<a href="{{ route('categories-detail', $category->slug) }}"
class="component-categories d-block">
<div class="categories-image">
<img
src="{{ Storage::url($category->photo) }}"
alt=""
class="w-100"
/>
</div>
<p class="categories-text">{{ $category->name }}</p>
</a>
</div>
#empty
<div class="col-12 text-center py-5"
data-aos="fade-up"
data-aos-delay="100">
Category not found
</div>
#endforelse
</div>
This my Script
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.green.min.css"/>
This Javascript
<script> $(document).ready(function($){
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:false,
autoWidth:false,
responsive:{0:{items:1},600:{items:3},1000:{items:5}}
})
})
</script>
This my controller for store
public function store(CategoryRequest $request)
{
$data= $request->all();
$data['slug'] = Str::slug($request->name);
$data['photo'] = $request->file('photo')->store('assets/category','public');
Category::create($data);
return redirect()->route('category.index');
}
Thanks for help
Related
I am trying to create a slideshow of the data that is pulled from a wordpress site using glide js and a for each loop.
This is what I tried:
<main id="primary" class="site-main">
<div class="home-card-wrapper glide">
<div class="glide__track" data-glide-el="track">
<div class="glide__slides">
<?php foreach($home_slider as $slide) : ?>
<div class="glide__slide">
<div class="home-card">
<div class="home-card-header" style="background-image: url('<?php echo get_the_post_thumbnail_url($slide->page_link) ?>');">
<p><?php echo $slide->heading; ?></p>
</div>
<div class="home-card-content">
<p><?php echo $slide->subheading?></p>
<p><?php echo $slide->description?></p>
<div class="lpd-button">
<img src="/wp-content/uploads/2023/01/Blk-with-white-arrow_34.5px-min.svg" alt="LPD Arrow">
Learn More
</div>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<div class="glide__arrows" data-glide-el="controls">
<button class="glide__arrow glide__arrow--left" data-glide-dir="<">previous</button>
<button class="glide__arrow glide__arrow--right" data-glide-dir=">">next</button>
</div>
</div>
</div>
<!-- Required Core Stylesheet -->
<link rel="stylesheet" href="node_modules/#glidejs/glide/dist/css/glide.core.min.css">
<!-- Optional Theme Stylesheet -->
<link rel="stylesheet" href="node_modules/#glidejs/glide/dist/css/glide.theme.min.css">
<script src="https://cdn.jsdelivr.net/npm/#glidejs/glide">
</script>
<script>
new Glide('.glide', {}).mount()
</script>
</main>
And I am getting both "home cards" on one slide. I want them to be separated onto different slides.
Any help?
I'm using Laravel Swiper in Product Page for Product Images. I have two columns for images in database. One is for single image and the other one is for multiple images. I want to slide these images into the swiper.
My view:
<head>
<link href="{{asset('/css/swiper.min.css')}}" rel="stylesheet" type="text/css" />
</head>
<div class="col-sm-6 col-lg-5 product-image-details">
<input type="hidden" id="check-use-zoom" value="1" />
<input type="hidden" id="light-box-position" value="1" />
<input type="hidden" id="product-identify" value="404" />
<div class="lightbox-container"></div>
<div class="product-zoom-image">
<a href="{{ asset('storage/'.$product->image) }}" class="cloud-zoom main-image" id="product-cloud-zoom" style="width: 600px; height: 660px;" rel=" showTitle: false, zoomWidth:600,zoomHeight:660, position:'inside', adjustX: 0 ">
<img src="{{ asset('storage/'.$product->image) }}" title="First" alt="First" />
</a>
</div>
#if ($product->images)
<div class="additional-container">
<div class="swiper-viewport">
<div class="additional-images swiper-container">
<div class="swiper-wrapper">
<?php $i = 1; ?>
#foreach (json_decode($product->images, true) as $image)
<div class="item swiper-slide">
<a class="cloud-zoom-gallery sub-image" id="product-image-options-" href="{{ asset('storage/'.$product->image) }}" title="{{$product->name}}" rel="useZoom: 'product-cloud-zoom', smallImage: '{{ asset('storage/'.$product->image) }}'" data-pos="{{$i}}">
<img src="{{ asset('storage/'.$image)}}" title="Multi" alt="Multi" />{{$i}}
</a>
</div>
<?php $i++; ?>
#endforeach
</div>
</div>
<div class="swiper-pager">
<div class="swiper-button-next additional-button-next"></div>
<div class="swiper-button-prev additional-button-prev"></div>
</div>
</div>
</div>
#endif
</div>
<script src="{{asset('/js/jquery-2.1.1.min.js')}}"></script>
<script src="{{asset('/js/swiper.jquery.js')}}"></script>
I'm not getting any results.
I want to ask how I can append ajax data on the bootstrap carousel. 2 post-show on the bootstrap carousel when the page load for the first time then if someone clicks the next arrow bootstrap carousel slide and shows the next 2 posts I'm getting 2 posts per click with ajax now I want to append next 2 posts on the bootstrap carousel and so on like this
here's my blade code where I'm using foreach to show 2 posts when pages load for example I'm showing post 1 and 2 here
<div id="carousela" class="carousel slide" data-touch="false" data-interval="false">
<div class="carousel-inner">
#foreach($magazine->chunk(2) as $magazines)
<div class="carousel-item {{ $loop->first ? 'active' : '' }}">
#foreach($magazines as $row)
<div class="row no-gutters m-0 p-0">
<div class="col-md-2 col-sm-12">
<img src="{{(!empty($row->magazine_sys_file_name) ? asset('/uploads/'.$row->magazine_sys_file_name):'')}}" class="img-thumbnail border-0 p-0" alt="" srcset="">
</div>
<div class="col-md-10 col-sm-12 px-4 m-0 m-mb">
<h4 class="text-light m-0 p-0">{{$row->title}}</h4>
{{($row->magazine_des) ? $row->magazine_des: ''}}
<div>{{__('Read More')}}</div>
</div>
</div>
#endforeach
</div>
#endforeach
</div>
</div>
now I'm using onclick function to get the next 2 posts here's ajax code and with this code, i'm getting post 3 and 4 now I want to append these 2 posts on the bootstrap carousel
$('#nextclick').on('click',function(){
var val = $('#hidden').val();
var data = {val:val}
$.ajax({
url: "{{url('/user/nextmagazine')}}",
method: 'get',
data: data,
success: function(data){
$('#hidden').val(parseInt(val) + parseInt(2));
}
})
})
here's my result after onclick
if anyone can help me with how I can append this data in the ajax success function to show on the bootstrap carousel
Thank you
You can loop through your jsons return from backend and append that inside some variable using += .Finally , add generated html inside your carousel using $(html).insertAfter('#carousela .carousel-item:last') this will insert new slide after last slide .
Demo Code :
$(document).ready(function() {
$("#carousela").carousel();
//using `one` just for demo change it to `on`
$('#nextclick').one('click', function() {
/* var val = $('#hidden').val();
success: function(data){
//your other codes..
$('#hidden').val(parseInt(val) + parseInt(2));*/
//suppose data return look like this..
var data = [{
"id": 3,
"title": "Something3",
"magazine_sys_file_name": "somehting",
"link": null
}, {
"id": 4,
"title": "Something4",
"magazine_sys_file_name": "somehting",
"link": null
}]
if (data.length > 0) {
var html = ""
//loop
$(data).each(function(i, v) {
//generate htmls//
html += ` <div class="carousel-item">
<div class="row no-gutters m-0 p-0">
<div class="col-md-2 col-sm-12">
<img src="/uploads/${v.magazine_sys_file_name}" class="img-thumbnail border-0 p-0" alt="" srcset="">
</div>
<div class="col-md-10 col-sm-12 px-4 m-0 m-mb">
<h4 class="text-light m-0 p-0">${v.title}</h4>
<div>{{__('Read More')}}</div>
</div>
</div>
</div>`
})
//insert new html after last slide
$(html).insertAfter('#carousela .carousel-item:last')
}
/*}
})*/
})
});
#carousela{
background:black
}
<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>
<div id="carousela" class="carousel slide" data-touch="false" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row no-gutters m-0 p-0">
<div class="col-md-2 col-sm-12">
<img src="{{(!empty($row->magazine_sys_file_name) ? asset('/uploads/'.$row->magazine_sys_file_name):'')}}" class="img-thumbnail border-0 p-0" alt="" srcset="">
</div>
<div class="col-md-10 col-sm-12 px-4 m-0 m-mb">
<h4 class="text-light m-0 p-0">Something1</h4>
<div>{{__('Read More')}}</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row no-gutters m-0 p-0">
<div class="col-md-2 col-sm-12">
<img src="{{(!empty($row->magazine_sys_file_name) ? asset('/uploads/'.$row->magazine_sys_file_name):'')}}" class="img-thumbnail border-0 p-0" alt="" srcset="">
</div>
<div class="col-md-10 col-sm-12 px-4 m-0 m-mb">
<h4 class="text-light m-0 p-0">Something2</h4>
<div>{{__('Read More')}}</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousela" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#carousela" data-slide="next" id="nextclick">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
I am using Owl carousel in my html desing. It is working fine but not displaying next and previous button. Then I have added button in my page still it is not displaying. And I have also implemented in same way in my Laravel blade template in it's working fine with next previous button. I have added Owl carousel version 2.3.4.
Here is my code which I have done in my Html:
I have added pictures of it. in first picture it is working fine with laravel blade. And in second it is not displaying arrow button for next and previous.
I have searched it but I didn't got any proper solution. Does anyone knows what is wrong with it? Did I missed something? Thanks for the help in advance.
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/boxicons.min.css">
<link rel="stylesheet" href="css/datepicker.min.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="features">
<img src="images/features -bg.jpg" alt="Fitzoh" class="features-bg">
<div class="container">
<div class="row align-items-center">
<div class="col-12 col-lg-6 text-center text-lg-left">
<h6 class="text-light-green">Standout with Fitzoh</h6>
<div class="divider-sm"></div>
<h2>Take your fitness business to the next level</h2>
<p>With Fitzoh, adopting a better client experience has been made easier than ever.</p>
Know More
<div class="features-list mt48 text-left">
<a href="#one" class="feature mb24 active">
<p class="mb0">Add value to your brand through your own application</p>
</a>
<a href="#two" class="feature mb24">
<p class="mb0">Enhance client experience through virtual training</p>
</a>
<a href="#three" class="feature mb24">
<p class="mb0">Create your own excercise and diet plans</p>
</a>
<a href="#four" class="feature mb24">
<p class="mb0">Easy Scheduling & performance tracking</p>
</a>
</div>
</div>
<div class="col-12 col-lg-6 text-center text-lg-right">
<div class="owl-carousel">
<div class="item" data-hash="one">
<img class="block-image" src="images/feature1.png" alt="image">
</div>
<div class="item" data-hash="two">
<img class="block-image" src="images/feature2.png" alt="image">
</div>
<div class="item" data-hash="three">
<img class="block-image" src="images/feature3.png" alt="image">
</div>
<div class="item" data-hash="four">
<img class="block-image" src="images/feature1.png" alt="image">
</div>
</div>
</div>
<div class="owl-nav">
<!-- thess buttons I have added manually -->
<button type="button" role="presentation" class="owl-prev">
<span aria-label="Previous">‹</span>
</button>
<button type="button" role="presentation" class="owl-next">
<span aria-label="Next">›</span>
</button>
</div>
</div>
</div>
</section>
<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/datepicker.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/common.js"></script>
<script src="js/script.js"></script>
</body>
</html>
$(document).ready(function(e) {
$('.owl-carousel').owlCarousel({
loop: true,
margin: 0,
autoplay: true,
smartSpeed: 500,
nav: true,
dots: false,
navText: ['<span aria-label="Previous">‹</span>','<span aria-label="Next">›</span>'],
lazyLoad:true,
});
});
.owl-carousel .owl-nav button{width:25px; text-align:center; border:1px solid #ccc !important;}
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
</head>
<body>
<section class="features">
<!-- <img src="images/features -bg.jpg" alt="Fitzoh" class="features-bg"> -->
<div class="container">
<div class="row align-items-center">
<div class="col-12 col-lg-6 text-center text-lg-left">
<h6 class="text-light-green">Standout with Fitzoh</h6>
<div class="divider-sm"></div>
<h2>Take your fitness business to the next level</h2>
<p>With Fitzoh, adopting a better client experience has been made easier than ever.</p>
Know More
<div class="features-list mt48 text-left">
<a href="#one" class="feature mb24 active">
<p class="mb0">Add value to your brand through your own application</p>
</a>
<a href="#two" class="feature mb24">
<p class="mb0">Enhance client experience through virtual training</p>
</a>
<a href="#three" class="feature mb24">
<p class="mb0">Create your own excercise and diet plans</p>
</a>
<a href="#four" class="feature mb24">
<p class="mb0">Easy Scheduling & performance tracking</p>
</a>
</div>
</div>
<div class="col-12 col-lg-6 text-center text-lg-right">
<div class="owl-carousel">
<div class="item" data-hash="one">
<img class="block-image" src="https://png.pngtree.com/thumb_back/fw800/20151028/pngtree-Design-Light-Texture-Wallpaper-background-photo-674871.jpg" alt="image">
</div>
<div class="item" data-hash="two">
<img class="block-image" src="https://blog.sonicwall.com/wp-content/uploads/2018/05/SNWL-image-412.jpg" alt="image">
</div>
<div class="item" data-hash="three">
<img class="block-image" src="http://www.rishtiindia.com/wp-content/uploads/2016/01/Background-Image-of-Flyer-Brochure.jpg" alt="image">
</div>
<div class="item" data-hash="four">
<img class="block-image" src="https://ane4bf-datap1.s3-eu-west-1.amazonaws.com/wmocms/s3fs-public/news/featured_media/featured-image-index.png?4t5V5QpQ.h.L2MpEUHsgfJM_lASy4dbb" alt="image">
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
dots:false,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})
nav:true -> Enable arrow navigation,
dots:true -> Enable dot navigation
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
responsiveClass:true,
responsive:{
0:{
items:1,
nav:true,
dots: true
},
600:{
items:3,
nav:true,
dots: true
},
1000:{
items:5,
nav:true,
dots: true
}
}
})
Is there any feature about animation on multiple slide item? I have tried its fine on single slide but not working on multiple item slide.
You can use JSFiddle or below code to debug.
$('.loop-test').owlCarousel({
center: true,
items: 2,
loop: true,
margin: 10,
animateOut: 'slideOutDown',
animateIn: 'flipInX',
dots: true
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.green.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.default.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.carousel.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/owl.carousel.min.js"></script>
<div class="owl-carousel loop-test">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
</div>
Any pointers would be appreciated!
Thanks.
According to my understanding, you are looking for different slide transition.
Each slide is going to get the animation class and add it to the item thus giving different animation for each slide.
Here is the updated fiddle
<div class="owl-carousel loop-test">
<div data-animate="flipInX animated"> Your Content </div>
<div data-animate="bounceIn animated"> Your Content </div>
<div data-animate="fadeIn animated"> Your Content 2 </div>
<div data-animate="flipInX animated"> Your Content </div>
<div data-animate="fadeIn animated"> Your Content </div>
<div data-animate="flipInY animated"> Your Content </div>
<div data-animate="fadeIn animated"> Your Content </div>
</div>
Try auto play
var owl = $('.owl-carousel');
owl.owlCarousel({
items:4,
loop:true,
margin:10,
autoplay:true,
autoplayTimeout:1000,
autoplayHoverPause:true
});
$('.play').on('click',function(){
owl.trigger('play.owl.autoplay',[1000])
})
$('.stop').on('click',function(){
owl.trigger('stop.owl.autoplay')
})
JSFiddle link
$('.loop-test').owlCarousel({
loop: true,
items: 2,
nav: true
});
$('.loop-test').on('translate.owl.carousel', function(event) {
$(this).find(".item").hide();
});
$('.loop-test').on('translated.owl.carousel', function(event) {
$(this).find(".item").fadeIn(800);
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.green.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.default.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.carousel.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/owl.carousel.min.js"></script>
<div class="owl-carousel owl-theme loop-test">
<div class="item"> Your Content </div>
<div class="item"> Your Content </div>
<div class="item"> Your Content </div>
<div class="item"> Your Content </div>
<div class="item"> Your Content </div>
<div class="item"> Your Content </div>
<div class="item"> Your Content </div>
</div>