After a lot of research, I have no found a solution to this problem.
I have migrated my html site to a Wordpress theme, but after doing that I found a problem with carousel. On my html code it works perfectly, but on Wordpress it adds empty items to the carousel.
Please any solution to this problem?
I found a related question, but no ones responded it:
Wordpress owl carousel add empty item
Please!!
Here's a referencial image
My code where I call the carousel
<div class="gallery full-width side-arrow">
<div class="item">
<img src="<?php bloginfo('template_directory');?>/images/sector/c_ba00.png" alt="">
</div>
<div class="item">
<img src="<?php bloginfo('template_directory');?>/images/sector/c_ba.png" alt="">
</div>
<div class="item">
<img src="<?php bloginfo('template_directory');?>/images/sector/c_ba2.png" alt="">
</div>
<div class="item">
<img src="<?php bloginfo('template_directory');?>/images/sector/c_ba3.png" alt="">
</div>
<div class="item">
<img src="<?php bloginfo('template_directory');?>/images/sector/c_ba4.png" alt="">
</div>
</div>
Related
I need a little help with this template I have been using.
http://preview.themeforest.net/item/anchor-freelancer-creative-agency-portfolio/full_screen_preview/22433983
Its using Fancybox for the project section, which I am trying to change from displaying photos to playing videos on mouse hover.
can anyone help me out with changing the code from displaying photos to playing a video? thanks
this is the code for the one project
<div class="grid-item">
<figure class="reveal-effect se2-white wow perspective-box"><img src="images/works12.jpg" alt="Image">
<figcaption> <a data-fancybox="gallery" href="images/works12.jpg">
<div class="bg-color" data-background="#d4beb1"></div>
<!-- end bg-color -->
<div class="brand"> <img src="images/logo-brand.png" alt="Image"> </div>
<!-- end brand -->
<h5>Digital Creative Works</h5>
<small>WEB, UI-UX, CODING</small> </a> </figcaption>
</figure>
</div>
How to create a grid of images using bootstrap?
Thats what i got when i try the next codes
<div class="row">
<div class="col">
<div class="thumbnail">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg">
</div>
</div>
</div>
Im still in the very first steps learning phase started with HTML CSS and bootstrap as it give us achievements to feel the process.
im expecting to get thumbnail of grids as the following image
try it like this...
<div class="row">
<div class="col">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
</div>
</div>
Then when adding extra pics, put them in columns too.
<div class="row">
<div class="col">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
</div>
<div class="col">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
</div>
<div class="col">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
</div>
</div>
It may then work even better if you add widths to those columns using col-* where * is any number between 1 and 12.
<div class="row">
<div class="col-3">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
</div>
<div class="col-3">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
</div>
<div class="col-3">
<img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
</div>
</div>
I have a bootstrap container which shows some images a two column layout. Since not all images have the same aspect ratio, it would be a pain to cut the images to the right ration. better to solve it in code.
My goal is to have all images of a container the same height. and the bigger image will resize to the height of the smaller. then the padding between images will be dynamic. I hope it is clear what I mean by this, otherwise let me know.
A hint from you is highly appreciated
-endo
Here is an example:
<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">
<div class="container container-fluid">
<div class="row w-100">
<div class="col-lg-12">
<figure>
<img sizes="auto" alt="" src="http://placekitten.com/g/1500/1000" width="100%">
</figure>
</div>
</div>
<div class="row w-100 h-100">
<div class="col-8">
<figure>
<img class="img-responsive" sizes="auto" alt="" src="http://placekitten.com/g/4523/2262" width="100%">
</figure>
</div>
<div class="col-4">
<figure>
<img class="img-responsive" sizes="auto" alt="" src="http://placekitten.com/g/2100/3000" width="100%">
</figure>
</div>
</div>
<div class="row w-100">
<div class="col-lg-12">
<figure>
<img sizes="auto" alt="" src="http://placekitten.com/g/1500/1000" width="100%">
</figure>
</div>
</div>
</div>
i tried basic paginatio
i tried simple pagination code
enter code here dwd
enter code hereemphasized text
I am new in asp.net mvc. I want to add pagination on images that are static lets suppose i kept 20 images in folder and i want to fetch these images from folder and show into view in a sequence on click of pagination numbers .
I have code this in view.
<div class="col-md-9">
<div class="row products products-big">
<div class="col-lg-4 col-md-6">
<div class="product">
<div class="image"> <img src="~/img/Quran.png" alt="" class="img-fluid image1"></div>
<div class="text">
<h3 class="h5">Holy Quran<br />with translation </h3>
<p class="price">$143.00</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="product">
<div class="image"><img src="~/img/tasbi.png" alt="" class="img-fluid image1"></div>
<div class="text">
<h3 class="h5">Tasbi</h3>
<p class="price">
<del>$280</del> $143.00
</p>
</div>
</div>
</div>
am trying to have a carousel where each slide is linked to a different page.
My code for the base carousel is
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<a href="about.html">
<img src="img//tshirts/large/slide1.png" alt="" >
</div>
<div class="item">
<a href="tshirts.html">
<img src="img//tshirts/large/slide2.png" alt="">
</div>
<div class="item">
<a href="sublimation.html">
<img src="img//tshirts/large/slide3.png" alt="">
</div>
<div class="item">
<a href="sweatshirts.html">
<img src="img//tshirts/large/slide4.png" alt="">
</div>
</div>
This works perfect and shows all 4 slides one after another then back to beginning
So I wanted to add the hyperlinks as follows
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<a href="about.html">
<img src="img//tshirts/large/slide1.png" alt="" >
</div>
<div class="item">
<a href="tshirts.html">
<img src="img//tshirts/large/slide2.png" alt="">
</div>
<div class="item">
<a href="sublimation.html">
<img src="img//tshirts/large/slide3.png" alt="">
</div>
<div class="item">
<a href="sweatshirts.html">
<img src="img//tshirts/large/slide4.png" alt="">
</div>
</div>
Now when I run the second code the first slide is perfect and when clicked goes to the page but as soon as it slides to the next slide no slide is shown and none are clickable and it doesn't go back to the first slide
Please close hyper link tag, Like
<div class="item active">
<a href="about.html">
<img src="img//tshirts/large/slide1.png" alt="" >
</a>
</div>