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.
Related
I am working on a website in which I want to place next and previous buttons on images so that its easy for the users to navigate through the images.
The php code which I have used with carousel classes are:
<div class="text-center border-right px-0">
<div id="owl_item_images" class="owl-carousel owl-theme">
<?php
if(isset($data['item']->media))
{
foreach ($data['item']->media as $media)
{
echo '<div class="item">
<div class="item_image_wrapper mx-auto">
<img class="item_images_carousel" src="'.$media->url.'">
</div>
</div>';
//'.$media->url.';
}
}
?>
</div>
</div>
The HTML code rendered at the front end is:
<div id="owl_item_images" class="owl-carousel owl-theme owl-loaded owl-drag">
<div class="owl-stage-outer owl-height" style="height: 350px;">
<div class="owl-stage" style="transform: translate3d(-7677px, 0px, 0px); transition: 1.5s; width: 8530px;">
<div class="owl-item">
<div class="item">
<div class="item_image_wrapper mx-auto">
<img class="item_images_carousel" src=".jpg">
</div>
</div>
</div>
<div class="owl-item">
---
</div>
<div class="owl-item">
---
</div>
<div class="owl-item">
---
</div>
<div class="owl-item active" style="width: 853px;">
<div class="item">
<div class="item_image_wrapper mx-auto">
<img class="item_images_carousel" src=".jpg">
</div>
</div>
</div>
</div>
</div>
<div class="owl-nav disabled">
<div class="owl-prev">prev</div>
<div class="owl-next">next</div>
</div>
<div class="owl-dots">
<div class="owl-dot"><span></span></div>
<div class="owl-dot"><span></span></div>
<div class="owl-dot"><span></span></div>
-
-
-
-
<div class="owl-dot active"><span></span></div>
</div>
</div>
Problem Statement:
I am wondering what changes I should do in the PHP code (as html code is rendered at the front end) above so that previous/next buttons are visible.
UPDATE:
On removing display none I can see next and previous buttons but I am wondering still how I can hide next and previous buttons from a single image.
<div class="owl-nav disabled">
<div class="owl-prev">prev</div>
<div class="owl-next">next</div>
</div>
.owl-carousel .owl-dots.disabled, .owl-carousel .owl-nav.disabled {
/* display: none; */
}
For owl carousel navigation is disabled by default. We have to enable it while initializing the carousel.
$(document).ready(function(){
$(".owl-carousel").owlCarousel({
nav : true;
});
});
You can refer this link for additional options
The owl-carousel will automatically disable the owl-prev and owl-next if there is only one item in the list.
So first verify that you have more than one item in the list. Try examples with increasing numbers of items and see when/if owl-prev and owl-next appear. There is logic in the library to disable the control under certain circumstances.
Otherwise look to link below that suggests ways to change the owl library class to avoid the problem under certain circumstances.
https://github.com/OwlCarousel2/OwlCarousel2/issues/1809
Not sure if i fully understand your question but maybe remove "disabled" from here:
<div class="owl-nav disabled">
I have the default code of slider on MaterializeCSS, I know I can just add fullscreen on slider class but when I do that my other content gets hidden inside my slider.
Is it possible to add fullscreen on slider only on top of the page and still make the slider interact with other content of my page normally?
<div class="slider">
<ul class="slides">
<li>
<img src="http://lorempixel.com/580/250/nature/1"> <!-- random image -->
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/2"> <!-- random image -->
<div class="caption left-align">
<h3>Left Aligned Caption</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/3"> <!-- random image -->
<div class="caption right-align">
<h3>Right Aligned Caption</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img src="http://lorempixel.com/580/250/nature/4"> <!-- random image -->
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
</ul>
</div>
.slide {
width: 100%;
height: auto;
}
Make sure the slider is not positioned absolute..
I think you should share you css as well.
I have some vertical tabs that change the content in a box.
I would like these tab to auto change by themselves and cant seem to get it to work.
Here is my code:
<div class="media">
<div class="parrent pull-left">
<ul class="nav nav-tabs nav-stacked">
<li class="">Architect</li>
<li class="">AIA</li>
<li class="">IRS </li>
<li class="">AKIN GUMP</li>
<li class="">PWC</li>
<li class="">EPA</li>
</ul>
</div>
<div class="parrent media-body">
<div class="tab-content">
<div class="tab-pane fade" id="tab1">
<div class="media">
<div class="pull-left boxImg">
<img class="img-responsive" src="images/Awards/R&D.png">
</div>
<div class="media-body">
<h2>Architect Magazine</h2>
<p>It’s hard to get simpler in conception and execution than Green-Zip Tape. The product is a substitute for the joint-compound tape that has been used between gypsum board panels since the introduction of prefabricated plasterboard in the early 1930s. The product impressed all three jurors.</p>
</div>
</div>
</div>
<div class="tab-pane fade active in" id="tab2">
<div class="media">
<div class="pull-left boxImg">
<img class="img-responsive" src="images/Awards/AIA.png">
</div>
<div class="media-body">
<h2>AIA Awards</h2>
<p>This patented demountable tape provides an alternative method for hanging sheetrock for future de-construction and reuse.
</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab3">
<div class="media">
<div class="pull-left boxImg">
<img class="img-responsive" src="images/Awards/IRS.png">
</div>
<div class="media-body">
<h2>IRS Awards</h2>
<p>Taxpayer's Zip type partitions installed within the Owned Property and Leased Property are included in asset class 57.0 of Rev. Proc. 87-56 for purposes of § 168.
</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab4">
<div class="media">
<div class="pull-left boxImg">
<img class="img-responsive" src="images/Awards/AkinGump.png">
</div>
<div class="media-body">
<h2>Akin Gump Awards</h2>
<p style="font-size: 12px;">The article analyzes an IRS ruling that says that zip system drywall is eligible for more favorable depreciation than conventional system drywall, despite the fact that each serves the same purpose and has a comparable cost. Burton also looks at the opportunities this creates for real estate developers and the implications for certain nontraditional real estate investment trusts.
</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab5">
<div class="media">
<div class="pull-left boxImg">
<img class="img-responsive" src="images/Awards/PWC.png">
</div>
<div class="media-body">
<h2>PWC Awards</h2>
<p style="font-size: 12px;">IRS rules on the depreciation classification of certain interior, nonloadbearing partitions
The IRS, in PLR 201404001, ruled that zip-type partitions installed within owned andleased property must be included in asset class 57.0 of Rev. Proc. 87-56 under Section 168, and that conventional drywall partitions are classified as non-residential real property under Section 168(e)(2)(B).
</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab6">
<div class="media">
<div class="pull-left boxImg">
<img class="img-responsive" src="images/Awards/US.png">
</div>
<div class="media-body">
<h2>EPA Awards</h2>
<p>Winner: Green-Zip-TapeTM Demountable Tape Drywall tape attachment system to support easy deconstruction and reuse
</p>
</div>
</div>
</div>
</div>
<!--/.tab-content-->
</div>
<!--/.media-body-->
</div>
<!--/.media-->
Please anything would help!
As you can see as the user clicks on the tabs on the left the content to the right changes. I would like to cycle through the tabs at 5 second intervals.
Thanks!
Here is the second box:
<div class="col-xs-12 col-sm-6 wow fadeInDown">
<div class="tab-wrap">
<div class="media">
<div class="parrent pull-left">
<ul class="nav nav-tabs nav-stacked">
<li class="">Marek</li>
<li class="">Ozarks Bank</li>
<li class="">CBRE </li>
<li class="">Habitat</li>
<li class="">Huffman</li>
<li class="">Holiday</li>
</ul>
</div>
<div class="parrent media-body">
<div class="tab-content">
<div class="tab-pane fade" id="tab7">
<div class="media">
<div class="pull-left boxImg">
<img class="img-responsive" src="images/Referals/MarekBrothers.jpg">
Click for Referance
</div>
<div class="media-body">
<h2>Marek</h2>
<p>We recently built our new 50,000 SF headquarters building and used the Green-Zip Partition System everywhere. To me, it’s a simple solution and one that everyone should take advantage of!
<br>
-<b>R. Stan Marek</b> / Chairman
</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab8">
<div class="media">
<div class="pull-left boxImg" style="margin-top: 20px;">
<img class="img-responsive" src="images/Referals/BankOfTheOzarks.jpg" style="margin-top: 30px;">
Click for Referance
</div>
<div class="media-body">
<h2>Bank Of The Ozarks</h2>
<p>….we now have a built in mechanism for remodeling that should be less expensive, less time consuming, and most importantly, environmentally friendly. <br>
-<b>Mark D. Ross</b> / Vice-Chairman & COO
</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab9">
<div class="media">
<div class="pull-left boxImg">
<img class="img-responsive" src="images/Referals/CBRE.jpg">
Click for Referance
</div>
<div class="media-body">
<h2>CBRE</h2>
<p>….there is no reason not to consider Green Zip Tape as shorter-life property for any tax payer especially based on the design intent, which was originally based on the reusable concept.
<br>
-<b>Matt Rader</b> / National Managing Director
</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab10">
<div class="media">
<div class="pull-left boxImg">
<img class="img-responsive" src="images/Referals/Habitat.jpg">
Click for Referance
</div>
<div class="media-body">
<h2>Habitat for Humanity</h2>
<p>I am very excited about the opportunity to help others have affordable and decent housing, while also keeping more products that can be reused from piling up in a local landfill. Now that is a winning combination!
<br>
-<b>Ron Collins</b> / Vice President of ReStores
</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab11">
<div class="media">
<div class="pull-left boxImg">
<img class="img-responsive" src="images/Referals/Huffman.jpg">
Click for Referance
</div>
<div class="media-body">
<h2>Huffman Drywall</h2>
<p>In addition to the sustainable benefits, the financial benefits associated with accelerated depreciation are valuable to me as an owner, and could potentially add to the building’s value in the event of a sale.
<br>
-<b>Brandon Huffman</b> / President
</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab12">
<div class="media">
<div class="pull-left boxImg">
<img class="img-responsive" src="images/Referals/Holiday.jpg">
Click for Referance
</div>
<div class="media-body">
<h2>Holiday Inn</h2>
<p>We found that the system will be acceptable for use in Holiday Inn, Holiday Inn Express hotels, and Staybridge Suites hotels. Congratulations.
<br>
-<b>Scott Bruce</b>
</p>
</div>
</div>
</div>
</div>
<!--/.tab-content-->
</div>
<!--/.media-body-->
</div>
<!--/.media-->
</div>
<!--/.tab-wrap-->
</div>
<!--/.col-sm-6-->
I'm not sure what triggers the change for you, but if it's the "active" class that's applied to the <li> element, then this should work for you:
jQuery:
var cycle = {
onReady: function() {
$(".nav-stacked li:first").addClass("active in");
$("#tab1").addClass("active in");
setInterval(function() {
var $navStacked = $("li.active");
var tabContent = $("li.active a").attr("href");
if ($navStacked.is(".nav-stacked li:last-child")) {
$navStacked.removeClass("active in");
$(".nav-stacked li:first").addClass("active in");
$("div " + tabContent).removeClass("active in");
$("div#tab1").addClass("active in");
} else {
$navStacked.removeClass("active in").next().addClass("active in");
$("div " + tabContent).removeClass("active in").next().addClass("active in");
}
}, 5000);
}
};
$(document).ready(cycle.onReady);
HTML:
<div class="media">
<div class="parrent pull-left">
<ul class="nav nav-tabs nav-stacked">
<li class="">Architect</li>
<li class="">AIA</li>
<li class="">IRS </li>
<li class="">AKIN GUMP</li>
<li class="">PWC</li>
<li class="">EPA</li>
</ul>
</div>
<div class="parrent media-body">
<div class="tab-content">
<div class="tab-pane fade" id="tab1">
<div class="media">
<div class="pull-left boxImg">
<img class="img-responsive" src="images/Awards/R&D.png">
</div>
<div class="media-body">
<h2>Architect Magazine</h2>
<p>It’s hard to get simpler in conception and execution than Green-Zip Tape. The product is a substitute for the joint-compound tape that has been used between gypsum board panels since the introduction of prefabricated plasterboard in the early
1930s. The product impressed all three jurors.</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab2">
<div class="media">
<div class="pull-left boxImg">
<img class="img-responsive" src="images/Awards/AIA.png">
</div>
<div class="media-body">
<h2>AIA Awards</h2>
<p>This patented demountable tape provides an alternative method for hanging sheetrock for future de-construction and reuse.
</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab3">
<div class="media">
<div class="pull-left boxImg">
<img class="img-responsive" src="images/Awards/IRS.png">
</div>
<div class="media-body">
<h2>IRS Awards</h2>
<p>Taxpayer's Zip type partitions installed within the Owned Property and Leased Property are included in asset class 57.0 of Rev. Proc. 87-56 for purposes of § 168.
</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab4">
<div class="media">
<div class="pull-left boxImg">
<img class="img-responsive" src="images/Awards/AkinGump.png">
</div>
<div class="media-body">
<h2>Akin Gump Awards</h2>
<p style="font-size: 12px;">The article analyzes an IRS ruling that says that zip system drywall is eligible for more favorable depreciation than conventional system drywall, despite the fact that each serves the same purpose and has a comparable cost. Burton also looks
at the opportunities this creates for real estate developers and the implications for certain nontraditional real estate investment trusts.
</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab5">
<div class="media">
<div class="pull-left boxImg">
<img class="img-responsive" src="images/Awards/PWC.png">
</div>
<div class="media-body">
<h2>PWC Awards</h2>
<p style="font-size: 12px;">IRS rules on the depreciation classification of certain interior, nonloadbearing partitions The IRS, in PLR 201404001, ruled that zip-type partitions installed within owned andleased property must be included in asset class 57.0 of Rev. Proc.
87-56 under Section 168, and that conventional drywall partitions are classified as non-residential real property under Section 168(e)(2)(B).
</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab6">
<div class="media">
<div class="pull-left boxImg">
<img class="img-responsive" src="images/Awards/US.png">
</div>
<div class="media-body">
<h2>EPA Awards</h2>
<p>Winner: Green-Zip-TapeTM Demountable Tape Drywall tape attachment system to support easy deconstruction and reuse
</p>
</div>
</div>
</div>
</div>
<!--/.tab-content-->
</div>
<!--/.media-body-->
</div>
<!--/.media-->
CodePen
In my mixitup, i am doing a basic filter but when i click one of the filter buttons, filtered items comes and disappears after a second. I can see in firebug, it adds “fail” class to the container of these items. But i can’t see what kind of error is that.
In codepen: http://codepen.io/anon/pen/PPOgwr
Here is my HTML for filter buttons:
<div class="row row-centered filter-section">
<div class="col-md-7 col-centered">
<ul class="filter">
<li>Hepsi</li>
<li>/</li>
<li>Basılı İş</li>
<li>/</li>
<li>Kurumsal Kimlik</li>
<li>/</li>
<li>İlan</li>
<li>/</li>
<li>Ambalaj</li>
<li>/</li>
<li>Stand</li>
<li>/</li>
<li>Film</li>
</ul>
</div>
</div>
Here is the container:
<div class="row grid" id="grid">
<div class="col-md-3 col-sm-6 margin-bottom-30 mix basili">
<div class="position-relative">
<a href="" id="silver1">
<img class="img-responsive" src="isler/silver/silver1.jpg" alt="portfolio">
<div class="overlay">
<div class="portfolio-title text-center">
<h4 class="font-nixie">SILVER DÖKÜM DEMİR KATALOG</h4>
</div>
</div> <!-- /overlay -->
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 margin-bottom-30 mix basili">
<div class="position-relative">
<a href="" id="silver2">
<img class="img-responsive" src="isler/silver/silver3.jpg" alt="portfolio">
<div class="overlay">
<div class="portfolio-title text-center">
<h4 class="font-nixie">SILVER DÖKÜM DEMİR KATALOG</h4>
</div>
</div> <!-- /overlay -->
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 margin-bottom-30 mix ilan">
<div class="position-relative">
<a href="" id="silver3">
<img class="img-responsive" src="isler/silver/silver4.jpg" alt="portfolio">
<div class="overlay">
<div class="portfolio-title text-center">
<h4 class="font-nixie">SILVER DÖKÜM DEMİR KATALOG</h4>
</div>
</div> <!-- /overlay -->
</a>
</div>
</div>
</div>
JS code:
$('#grid').mixItUp();
$('.filter-section').on( 'click', 'a.filter', function() {
var filterValue = $(this).attr('data-filter');
$('#grid').mixItUp('filter', filterValue, false);
$('#grid').on('mixFail', function(e, state){
console.log(state);
});
});
I need your helps
It's probably a bit late to give you an answer on this, but I ran into a similar problem and as part of that I managed to sort yours, too.
To cut it short, your issue is that you applied the 'filter' class on the <ul> as well as the <li> tags. Removing the class from <ul> in the CodePen you provided solves the issue - although messes up your layout.
Hope this helps.
I need a feature to finish my slider image. I've used Slick.js to build my slider and a little HTML and CSS to be displayed inside a modal that is fired up when the user clicks in an static image. Well, I need the first slide shown in the slider to be the one just clicked by the user. I think this is a very common feature in sliders of the world. But I haven't found the way of doing it after a lot of searching. I'm asking because maybe someone has used Slick before and he has had the same situation. I guess the setting I have to play with is initialSlide, but no idea how to store the reference of the image at the same time slider is initialized. I'm aware is a tricky problem but I'm asking just in case.Thank you in advanced
This is how I initialize the slider
<script>
$(document).ready(function(){
$('.slider-gallery').slick({
lazyLoad: 'ondemand',
slidesToShow: 1,
slidesToScroll: 1
});
$(".slick-prev").hide();
$(".slick-next").hide();
});
$('#prev').click(function(){
$(".slider-gallery").slick('slickNext');
});
$('#next').click(function(){
$(".slider-gallery").slick('slickPrev');
});
</script>
This is the html of the static gallery image
<div class="large-6 medium-6 small-12 columns">
<div class="main-img"><a href="#openGallery">
<img src="assets/images/2.png" alt=""></a>
</div>
<div class="thumbnails">
<img class="large-4 medium-4 small-4 columns" src="assets/images/1.png" alt="">
<img class="large-4 medium-4 small-4 columns" src="assets/images/2.png" alt="">
<div class="thumbnail-hover"><a href="#openGallery">
<div class="hover-gallery">23fotos</div>
<img class="large-4 medium-4 small-4 columns" src="assets/images/3.png" alt=""></a>
</div>
</div>
And this the html of the slider
<div id="openGallery" class="item-gallery">
<div class="row">
X
<div class="large-1 medium-1 columns">
<button class="button-slider-gallery previous-button fa fa-chevron-left" id="prev" value="prev"></button>
</div>
<div class="large-10 medium-10 columns">
<div class="slider-gallery">
<div class="image">
<img id="image-slider" class="width-images" data-lazy="assets/images/1.png">
</div>
<div class="image">
<img id="image-slider" class="width-images" data-lazy="assets/images/2.png">
</div>
<div class="image">
<img id="image-slider" class="width-images" data-lazy="assets/images/3.png">
</div>
</div>
</div>
<div class="large-1 medium-1 columns">
<button class="button-slider-gallery next-button fa fa-chevron-right" id="next" value="next"></button>
</div>
</div>
</div>
One way to do so is to use the slickGoTo() function attached to each click on image.
<img class="small-4 columns" src="assets/images/1.png" alt="" onclick="$('.slider-gallery').slickGoTo(0)">
<img class="small-4 columns" src="assets/images/2.png" alt="" onclick="$('.slider-gallery').slickGoTo(1)">
Notes:
The first slide is 0, the second is 1 and so...
You are using Foundation which is awesome. You don't need to add medium-4 and large-4 as you did when you have small-4. The Foundation rule is that "small" = small and larger.
If this is not working try the following syntax instaed:
onclick="$('.slider-gallery').slick('slickGoTo', 0);"
This depends on the slick version you're using.