I have tried several examples but nothing seems to be working. The typescript code doesn't work as intended in Vue.js as no implementation online uses ts. The modification is necessary as bootstrap works only with one item at a time. The idea is to create several wrap items and each one being displayed at a time.
I wanna just show 3 items (like the attached image) in my app. My code uses a lifecycle handler which is supposed to get the "card" elements onUpdated and create several "carousel" wrap items. Each wrap item will include 3 "card" elements but each card element will be different according to the displaying queue. E.g Wrap [1] - { 1,2,3} , Wrap [2] - {2,3,4} , Wrap [3] - {3,4,5}, Wrap [4] - { 4,5,1}, Wrap [5] - {5,1,2}
The following image is an inspection of a code found online [1]: https://i.stack.imgur.com/cCI2q.png
The following code is my implementation:
This is my representation however the buttons don't work properly https://i.stack.imgur.com/3Tx0R.png
<template>
<div class="container">
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="card">
<div class="img-wrapper"><img src="../../assets/homeimage.jpg" class="d-block w-100" alt="..." /></div>
<div class="card-body">
<h5 class="card-titles">Card 1</h5>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper"><img src="../../assets/homeimage.jpg" class="d-block w-100" alt="..." /></div>
<div class="card-body">
<h5 class="card-titles">Card 2</h5>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper"><img src="../../assets/homeimage.jpg" class="d-block w-100" alt="..." /></div>
<div class="card-body">
<h5 class="card-titles">Card 3</h5>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper"><img src="../../assets/homeimage.jpg" class="d-block w-100" alt="..." /></div>
<div class="card-body">
<h5 class="card-titles">Card 4</h5>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper"><img src="../../assets/homeimage.jpg" class="d-block w-100" alt="..." /></div>
<div class="card-body">
<h5 class="card-titles">Card 5</h5>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</template>
<script setup lang="ts">
import { onUpdated } from 'vue'
onUpdated(() => {
let carouselItems = document.querySelectorAll('.carousel .carousel-item')
carouselItems.forEach(el => {
const minPerSlide = 3
let next = el.nextElementSibling
for (var i = 1; i < minPerSlide; i++) {
if (!next) {
next = carouselItems[0]
}
let cloneChild = next.cloneNode(true)
el.appendChild(cloneChild.firstChild!)
next = next.nextElementSibling
}
})
})
</script>
[1]: https://i.stack.imgur.com/3Tx0R.png
Related
I have been trying to get only css for this carousel with custom bootstrap but it is aboslutely not working for me, it completely changes the site
This is the html for the carousel:
<div class="container text-center my-3">
<div id="recipeCarousel" class="carousel slide w-100" data-ride="carousel">
<div class="carousel-inner w-100" role="listbox">
<div class="carousel-item row no-gutters active">
<div class="col-3 float-left"><img class="img-fluid" src="http://placehold.it/350x280/222/fff?text=1"></div>
<div class="col-3 float-left"><img class="img-fluid" src="http://placehold.it/350x280/444?text=2"></div>
<div class="col-3 float-left"><img class="img-fluid" src="http://placehold.it/350x280/888?text=3"></div>
<div class="col-3 float-left"><img class="img-fluid" src="http://placehold.it/350x280/111/fff?text=4"></div>
</div>
<div class="carousel-item row no-gutters">
<div class="col-3 float-left"><img class="img-fluid" src="http://placehold.it/350x280?text=5"></div>
<div class="col-3 float-left"><img class="img-fluid" src="http://placehold.it/350x280/555?text=6"></div>
<div class="col-3 float-left"><img class="img-fluid" src="http://placehold.it/350x280/333/fff?text=7"></div>
<div class="col-3 float-left"><img class="img-fluid" src="http://placehold.it/350x280/bbb?text=8"></div>
</div>
</div>
<a class="carousel-control-prev" href="#recipeCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#recipeCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
If anyone could help me get just the css and js from bootstrap I would greatly appreciate it !!
In order to limit the scope of your CSS you have to create a unique selector. In your code you use id="recipeCarousel" and since id should be unique on the page, while class selectors allow multiple elements of the same class, all your CSS for this carousel should start with id.
This code will select only elements with carousel-inner class within recipeCarousel element.
#recipeCarousel carousel-inner {
background: blue;
}
You can have both ID and Classes on your elements. So if you want to select the wrapper as well, you can change it to
<div id="myCarousel" class="container text-center my-3">
...
</div>
and start selecting from there.
I'm using Ruby on Rails 6 and webpacker. Tried to add carousel slide looks like this(Bootstrap 4 Card Slider)
However, when I clicked the button to show the next(or previous) slide, Uncaught TypeError: $(...).carousel is not a function popped up in the console. Even I write a script $('.carousel').carousel directly in the console, same error occurred.
I saw that loading JQuery multiple times causes similar error, but I don't know I did that.
Below are my codes. Any suggestion is helpful.
app/views/home_page/test.html.erb
<%= javascript_pack_tag "carousel" %>
<section class="container p-t-3">
<div class="row">
<div class="col-lg-12">
<h1>Bootstrap 4 Card Slider</h1>
</div>
</div>
</section>
<section class="carousel slide" data-ride="carousel" id="postsCarousel">
<div class="container">
<div class="row">
<div class="col-xs-12 text-md-right lead">
<a class="btn btn-outline-secondary prev" href="" title="go back"><i class="fa fa-lg fa-chevron-left"></i></a>
<a class="btn btn-outline-secondary next" href="" title="more"><i class="fa fa-lg fa-chevron-right"></i></a>
</div>
</div>
</div>
<div class="container p-t-0 m-t-2 carousel-inner">
<div class="row row-equal carousel-item active m-t-0">
<div class="col-md-3">
<div class="card">
<div class="card-img-top card-img-top-250">
<img class="img-fluid" src="http://i.imgur.com/EW5FgJM.png" alt="Carousel 1">
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-img-top card-img-top-250">
<img class="img-fluid" src="http://i.imgur.com/Hw7sWGU.png" alt="Carousel 2">
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-img-top card-img-top-250">
<img class="img-fluid" src="http://i.imgur.com/g27lAMl.png" alt="Carousel 3">
</div>
</div>
</div>
</div>
<div class="row row-equal carousel-item m-t-0">
<div class="col-md-3">
<div class="card">
<div class="card-img-top card-img-top-250">
<img class="img-fluid" src="//visualhunt.com/photos/l/1/office-student-work-study.jpg" alt="Carousel 4">
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-img-top card-img-top-250">
<img class="img-fluid" src="//visualhunt.com/photos/l/1/working-woman-technology-computer.jpg" alt="Carousel 5">
</div>
</div>
</div>
<div class="col-md-3 fadeIn wow">
<div class="card">
<div class="card-img-top card-img-top-250">
<img class="img-fluid" src="//visualhunt.com/photos/l/1/people-office-team-collaboration.jpg" alt="Carousel 6">
</div>
</div>
</div>
</div>
</div>
</section>
app/javascript/packs/carousel.js
(function($) {
"use strict";
// manual carousel controls
$('.next').click(function(){ $('.carousel').carousel('next');return false; });
$('.prev').click(function(){ $('.carousel').carousel('prev');return false; });
})(jQuery);
config/webpack/environment.js
const { environment } = require('#rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery',
jquery: 'jquery/src/jquery',
Popper: 'popper.js'
})
)
module.exports = environment
app/javascript/packs/application.js
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
require("trix")
require("#rails/actiontext")
import '../src/application'
import 'bootstrap'
app/javascript/src/application.scss
#import '~bootstrap/scss/bootstrap';
package.json
{
"name": "sample",
"private": true,
"dependencies": {
"#rails/actioncable": "^6.0.0",
"#rails/actiontext": "^6.0.2-1",
"#rails/activestorage": "^6.0.0",
"#rails/ujs": "^6.0.0",
"#rails/webpacker": "4.2.2",
"bootstrap": "4.3.1",
"jquery": "^3.4.1",
"popper.js": "^1.16.1",
"trix": "^1.0.0",
"turbolinks": "^5.2.0"
},
"version": "0.1.0",
"devDependencies": {
"webpack-dev-server": "^3.10.1"
}
}
I have the following in my environment.js:
const { environment } = require('#rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default']
})
)
module.exports = environment
which makes jquery work with webpacker.
Then in your application.scss
#import '~bootstrap';
Next your test.html.rb is in a bit of a mess. This is a cut down version that works without the cards and other styling:
<section class="container">
<h1>Bootstrap 4 Card Slider</h1>
</section>
<section class="container">
<a class="btn btn-lg" href="#carouselExample" role="button" data-slide="prev">
<span> « </span>
</a>
<a class="btn btn-lg" href="#carouselExample" role="button" data-slide="next">
<span> » </span>
</a>
<div id="carouselExample" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="http://i.imgur.com/EW5FgJM.png" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://i.imgur.com/Hw7sWGU.png" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://i.imgur.com/g27lAMl.png" alt="Third slide">
</div>
</div>
</div>
</section>
This uses data attributes so you don't need any of the javascript in carousel.js. Get something like this to work and then add your cards and styling back in.
I have used bootstrap material carousel. It works fine when I load image statically.Like:
<div class="row" >
<div class="container-fluid">
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel" data-interval="1000">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="view">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(15).jpg" alt="First slide">
<div class="mask rgba-black-slight"></div>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">First Event</h3>
<p>This is our first event.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(16).jpg" alt="Second slide">
<div class="carousel-caption">
<h3 class="h3-responsive">Second Event</h3>
<p>This is our second event.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(17).jpg" alt="Third slide">
<div class="carousel-caption">
<h3 class="h3-responsive">Third Event</h3>
<p>This is our third event.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<i class="material-icons">keyboard_arrow_left</i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
<i class="material-icons">keyboard_arrow_right</i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
But when I load images from database i.e dynamically, carousel's images splits in block view and carousel doesn't works anymore. Like when I load in this way:
<div class="row" >
<div class="container-fluid">
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel" data-interval="1000">
<div class="carousel-inner">
{{#each events}}
<div class="carousel-item active">
<div class="view">
<img class="d-block w-100" src="/uploads/{{file}}" alt="First slide">
<div class="mask rgba-black-slight"></div>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">{{title}}</h3>
<p>{{description}}</p>
</div>
</div>
{{/each}}
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<i class="material-icons">keyboard_arrow_left</i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
<i class="material-icons">keyboard_arrow_right</i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
When I load in this way images are seen in block view one after another instead of carousel.
I can see those images but not as a carousel. I mean I am getting images from back end but they are not displayed well.
For kind information I have used node js and handlebars as template engine.
What is wrong here? I am new to node and sorry if it was a simple question.
The class active is included in all slides, that's why all of them are visible.
FIrst for all, remove the class active in the slides, and with jQuery you can: $('.carousel-item:first-child').addClass('active').
https://api.jquery.com/first-child-selector/
This will add the class active for the first node .carousel-item finded.
Hope it helped.
Cheers.
I am working in an Angular4 application,In this I have a carousel were I show the products and product name and price .Currently I have 6 products (3+3).I have 2 buttons if I clicked on left carousel will show 3 products from left side for right button will show 3 products from right ride.
The problem is when I add a new product carousel generate a new row instead showing like in the line of products.
How to resolve is .
HTML
<section class="carousel slide" id="myCarousel">
<div class="container">
<div class="row">
<div class="col-sm-12 text-right mb-4">
<a class="btn btn-outline-secondary carousel-control left" href="#myCarousel" data-slide="prev" title="go back"><i class="fa fa-lg fa-chevron-left"></i></a>
<a class="btn btn-outline-secondary carousel-control right" href="#myCarousel" data-slide="next" title="more"><i class="fa fa-lg fa-chevron-right"></i></a>
</div>
</div>
</div>
<div class="container p-t-0 m-t-2 carousel-inner">
<div class="row row-equal carousel-item active m-t-0">
<div class="col-sm-4">
<div class="card">
<div class="card-img-top card-img-top-250 one">
<img routerLink="/my-cart" class="img-fluid" src="assets/Images/Popular_Products/iPhone1.jpg" alt="Carousel 1">
<img routerLink="/my-cart" (click)="getProductName(Pname1)" class="img-fluid two" src="assets/Images/Popular_Products/iPhone2.jpg" alt="Carousel 1">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
<span #Pname1>iPhone</span>
<br>
<br>
3433 $
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-img-top card-img-top-250 one">
<img routerLink="/my-cart" class="img-fluid" src="assets/Images/Popular_Products/indianSpices1.jpg" alt="Carousel 1">
<img routerLink="/my-cart" (click)="getProductName(Pname)" class="img-fluid two" src="assets/Images/Popular_Products/indianSpices2.jpg" alt="Carousel 1">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
<span #Pname>Indian Spices</span>
<br>
<br>
747 $
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-img-top card-img-top-250 one">
<img class="img-fluid" src="assets/Images/Popular_Products/6.jpg" alt="Carousel 1">
<img routerLink="/my-cart" class="img-fluid two" src="assets/Images/Popular_Products/10.jpg" alt="Carousel 1">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
<span>Home Appliances</span>
<br>
<br>
<span >4500 $</span>
</div>
</div>
</div>
</div>
</div>
<div class="row row-equal carousel-item m-t-0">
<div class="col-sm-4">
<div class="card">
<div class="card-img-top card-img-top-250 one">
<img routerLink="/my-cart" class="img-fluid" src="assets/Images/Popular_Products/8.jpg" alt="Carousel 1">
<img routerLink="/my-cart" class="img-fluid two" src="assets/Images/Popular_Products/9.jpg" alt="Carousel 1">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
Bicycles
<br>
<br>
2329 $
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-img-top card-img-top-250 one">
<img routerLink="/my-cart" class="img-fluid" src="assets/Images/Popular_Products/5.jpg" alt="Carousel 1">
<img routerLink="/my-cart" class="img-fluid two" src="assets/Images/Popular_Products/12.jpg" alt="Carousel 1">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
Electronic Items
<br>
<br>
8333 $
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-img-top card-img-top-250 one">
<img routerLink="/my-cart" class="img-fluid" src="assets/Images/Popular_Products/2.jpg" alt="Carousel 1">
<img routerLink="/my-cart" class="img-fluid two" src="assets/Images/Popular_Products/7.jpg" alt="Carousel 1">
</div>
<div class="card-block pt-2">
<div class="col-sm-12 text-center card-text">
Natural Oils
<br>
<br>
5435 $
</div>
</div>
</div>
</div>
</div>
</div>
</section>
In stackblitz, there's no button to add a new product. Either you are adding the new product manually or the code is missed from the solution.
If adding manually, possibly you are adding it as a new row instead of another column. Since you are using bootstrap layout, your code divides the screen area in 12 parts, and each image is using 4 parts (sm-12, sm-4 respectively). Now when you add another product, that creates a new row since there's no space remaining in the current row.
To fix this out, rather than giving part by part allocation, give a fixed size to each product card, and then let the whole scroll horizontally.
Or, create another sm-12 row (3rd carousal) and add elements to it. You will be required to create a component hosting 3 products and each left/right button will cycle in the main carousal. Any product addition will go in the empty component and once filled, will create another instance to host the product.
--- pseudo code below, customize with actual values ----
#Component( {} }
export class ProductsContainerComponent {
products: Product[]
// template shows 3 products
}
#Component()
export class ProductCarousalComponent {
carousal: ProductsContainerComponent[]
btnPrevious, btnNext: Button => Each set the current pointer to a given container in list, which gets displayed
addNewProduct() {
ProductsContainerComponent container;
carousal.each(prod => if (prod.products.length < 3) { container = prod; break; } );
if (container == null)
{ container = new ProductsContainerComponent(); carousal.push (container); }
// construct your new product here (url, images, text etc)
container.products.push (new Product() );
}
I need create image slider to move left and right with arrow buttons. please see my existing images here
<div class="col-md-3 animated fadeInUp" >
<div class="tourbox">
<div style="background-image:url(); width:100%; height:100%;" class="zoom" >
</div>
</div>
<div class="col-md-12 text-center tourboxInner1"><img src="img/icons/info.png" width="30px"></div>
<div class="col-md-12 text-center tourboxInner">CLASSICAL TOUR</div>
</div>
<div class="col-md-3 animated fadeInUp">
<div class="tourbox">
<div style="background-image:url(); width:100%; height:100%;" class="zoom" >
</div>
</div>
<div class="col-md-12 text-center tourboxInner1"><img src="img/icons/info.png" width="30px"></div>
<div class="col-md-12 text-center tourboxInner">TEA COUNTRY TOUR</div>
</div>
my image slider example link here
I need show four images in the page at one time and need move left and right one by one with new images. I am using bootstrap here. how can I do this please help me?
hey hello Brother may be my answer helped you totally using bootstrap no custom css and js
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="http://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://www.gettyimages.com/gi-resources/images/Embed/new/embed2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://www.w3schools.com/w3css/img_fjords.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
here is working fiddle