I have a very basic carousel images slider. I also have a folder with all the images y want to show in the slides
<div class="row">
<div class="col" style="float: none;">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://cdn.pixabay.com/photo/2012/08/27/14/19/mountains-55067__340.png" class="rounded mx-auto d-block" style="height: 100vh;">
</div>
<div class="carousel-item">
<img src="https://iso.500px.com/wp-content/uploads/2014/07/big-one.jpg" class="rounded mx-auto d-block" style="height: 100vh;">
</div>
</div>
</div>
</div>
</div>
What I'd like to know is if is there some way to randomly choose the next image for the carousel from my pool images folder with out specifying by hand in the code?
I'm trying to find something but I haven't had luck yet
Related
I have a page with 6 clickable buttons that each open up a different modal. I have 4 working ones that open their corresponding modal when clicked, however, all of them after the 4th do not work. The modal works if I assign the ID of an existing modal to the broken modals, however, if I change ONLY the ID from portfolioModal4 to portfolioModal5, it doesn't work.
Below is the code for the modal followed by the code for the button that, when pressed, should open the modal.
<!-- Modal 5-->
<div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal"><img src="img/close-icon.svg" alt="Close modal" /></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="modal-body">
<!-- Project Details Go Here-->
<h2 class="text-uppercase">Readiness Center Dedication</h2>
<p class="item-intro text-muted">4 Photos</p>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block w-100" src="img/chi1.jpeg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<div class="align-bottom">
<p>Dedication Language</p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/chi1.jpeg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<div class="align-bottom">
<p>Candy Mason at Renaming</p>
</div>
</div>
<section class="page-section bg-light" id="portfolio">
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">Photos</h2>
<h3 class="section-subheading text-muted"></h3>
</div>
<div class="row">
<div class="col-lg-4 col-sm-6 mb-4">
<div class="portfolio-item">
<a class="portfolio-link" data-toggle="modal" href="#portfolioModal5">
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="img/michigan.jpg" alt="" />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">2019 Michigan Tailgate vs. Army</div>
<div class="portfolio-caption-subheading text-muted">6 Photos</div>
</div>
</div>
</div>
Is there a reason you're using an anchor tag instead of a button to trigger your modal? In the Bootstrap docs, it looks like they use a button element with a data-target attribute. Can you try that instead and see if it works? Using what they have in the docs may be more screen-reader friendly too.
Seems like the part of the modal HTML is not having complete closing tags
Here you are a fixed HTML modal:
<div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal"><img src="img/close-icon.svg" alt="Close modal" /></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="modal-body">
<!-- Project Details Go Here-->
<h2 class="text-uppercase">Readiness Center Dedication</h2>
<p class="item-intro text-muted">4 Photos</p>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block w-100" src="img/chi1.jpeg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<div class="align-bottom">
<p>Dedication Language</p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/chi1.jpeg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<div class="align-bottom">
<p>Candy Mason at Renaming</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I hope this would work for you
Can anyone help me in achieving the following carousel (train carousel) effect using grid and cards in MaterializeCSS. I have tried many solutions, but I'm unable to achieve desired results.
Here is what I have achieved so far: https://jsfiddle.net/c5mq2ezo/1/ (sorry for the images inside the link)
But the problem is I need to create train carousel effect with any number of grids/cards available. Right now it gives unexpected results in visible slide. If I add 4 or 5 cards, it only displays 3 instead of 4. If I add 7 or 8 cards then it displays 4 cards as it should.
Following is the code:
<body class="grey darken-3">
<section>
<div class="carousel carousel-slider">
<a class="carousel-item black-text" href="#one">
<div class="card">
<div class="card-image">
<img src="images/samples/insurance.png">
</div>
<div class="card-content">
<h6>Insurance</h6>
<p>Adjusters have photos of cars damaged in accidents; these images, however, are not helping prevent...</p>
</div>
</div>
</a>
<a class="carousel-item black-text" href="#two">
<div class="card">
<div class="card-image">
<img src="images/samples/manufucturing.png">
</div>
<div class="card-content">
<h6>Manufucturing defects</h6>
<p>Production lines are often equipped with cameras, but it can be challenging to infer quality or safety problems...</p>
</div>
</div>
</a>
<a class="carousel-item black-text" href="#three">
<div class="card">
<div class="card-image">
<img src="images/samples/retail.png">
</div>
<div class="card-content">
<h6>Retail</h6>
<p>Recommend products that match your customers' style, analyze reviews or survey data for topics and trends</p>
</div>
</div>
</a>
<a class="carousel-item black-text" href="#three">
<div class="card">
<div class="card-image">
<img src="images/samples/retail.png">
</div>
<div class="card-content">
<h6>Content filtering</h6>
<p>Adjusters have photos of cars damaged in accidents; these images, however, are not helping prevent future ...</p>
</div>
</div>
</a>
<a class="carousel-item black-text" href="#three">
<div class="card">
<div class="card-image">
<img src="images/samples/retail.png">
</div>
<div class="card-content">
<h6>Card 5</h6>
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
</div>
</a>
</div>
</section>
</body>
CSS:
.carousel .carousel-item {
width: 340px !important;
padding: 20px;
}
.card{
border-radius: 8px;
position: relative !important;
right: 20px !important;
}
Actually you can add the cards to the carousel adding the class carousel-item to the card and not using the a tag:
<div class="carousel ">
<div class="card carousel-item">
<div class="card-content">
<span class="card-title">Card 1</span>
Card 1 content
</div>
</div>
<a class="carousel-item" href="#one!"><img src="https://lorempixel.com/250/250/nature/1"></a>
<a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/2"></a>
<a class="carousel-item" href="#three!"><img src="https://lorempixel.com/250/250/nature/3"></a>
<a class="carousel-item" href="#four!"><img src="https://lorempixel.com/250/250/nature/4"></a>
<a class="carousel-item" href="#five!"><img src="https://lorempixel.com/250/250/nature/5"></a>
</div>
View in browser
The issue is when you add the picture because the pic uses all the space and the content is displayed below the carousel, maybe with some styles it could be fixed, I don't know too much about CSS.
Hope this be helpful.
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 created a carousel slider using bootstrap.
Here is my code:
<header id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="fill" style="background-image:url('http://s1.postimg.org/ndn5u1rf3/home_slider1.jpg one');"></div>
</div>
<div class="item">
<div class="fill" style="background-image:url('http://s1.postimg.org/6sk4s4pov/home_slider2.jpg two');"></div>
</div>
<div class="item">
<div class="fill" style="background-image:url('http://s1.postimg.org/uktg3nrpr/home_slider3.jpg three');"></div>
</div>
<div class="item">
<div class="fill" style="background-image:url('http://s1.postimg.org/uschmfdan/home_slider4.jpg four');"></div>
</div>
</div>
</header>
It works fine, but I need something like this. On this website, the slider moves smoothly.. but in my code it doesn't work like this.
Can anyone help me fix this? Is there a modification I could make to this code?
Thanks.
Based on the code below & using bootstrap, I have a grid layout with multiple .block components, each containing an image and a title. The images are larger than the column size so that they can resize to full width for responsive screen sizes (done with the CSS listed below). each image may be different heights & widths.
This works just fine as long as you don't define the image height in the attributes. As soon as you add the height it distorts the image proportions.
Now however, I need to set the image heights for some javascript so that it loads properly. Without setting the heights, the js is loading too quickly and the element heights are incorrect basically.
Right now I'm getting around this by using a setTimeout() to delay the js script by 1.5 seconds. This obviously isn't ideal as for someone with a slow connection it won't be long enough.
My Question: Is there a way to either (A) delay the js until all images have loaded on the page or (B) set the height for each image in a way that it will resize with the image width and keep my proportions correct for the image with css?
HTML:
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image1.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image2.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image3.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image4.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image5.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image6.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image7.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image8.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="block">
<img src="/img/image9.jpg" alt="image">
<h2>Image Title</h2>
</div>
</div>
</div>
</div>
CSS:
.block img{
max-width: 100%;
}
To delay the Js to run until all images are loaded you should use jquery's
$(window).load(function(){
//your code here
});
or you can resize images when each one is loaded
$('img').each($(this).load(function(){
//resizing code here with $(this).height or $(this).width() maybe
});
to check the bootstrap you can use
$(window).resize()
to do the same and that way resizing on the browser will rerun the js in load. This is how I test responsiveness with images.