I have a page having a carousel implemented using slick-carousel and jquery but I'm building this page in vue. Everything else works while migrating this carousel from jquery to vue except for the image itself which doesn't show up. I've been hacking at this for about three hours with no luck.
Heres the code for the carousel:
Jquery:
<div class=" petmark-slick-slider home-slider" data-slick-setting='{
"autoplay": true,
"autoplaySpeed": 8000,
"slidesToShow": 1,
"dots": true
}'>
<div class="single-slider home-content bg-image" data-bg="image/slider-2.jpg">
<div class="container">
<div class="row">
<div class="col-lg-10">
<h2> <span class="text-primary">61+ </span> Blood test<br> package</h2>
<h4 class="mt--30">package just Rs 399</h4>
<div class="slider-btn mt--30">
Book Now
</div>
</div>
</div>
</div>
<span class="herobanner-progress"></span>
</div>
<div class="single-slider home-content bg-image" data-bg="image/slider-1.jpg">
<div class="container">
<div class="row">
<div class="col-lg-10">
<h2> <span class="text-primary">Flat </span> 20% <br> off</h2>
<h4 class="mt--30">on all online bookings</h4>
<div class="slider-btn mt--30">
Book Now
</div>
</div>
</div>
</div>
<span class="herobanner-progress"></span>
</div>
</div>
Vue:
In template
<VueSlickCarousel class="petmark-slick-slider home-slider" :dots="true" :autoplay="true" :autoplaySpeed="8000" :slidesToShow="1">
<div class="single-slider home-content bg-image" data-bg="image/slider-2.jpg">
<div class="container">
<div class="row">
<div class="col-lg-10">
<h2> <span class="text-primary">61+ </span> Blood test<br> package</h2>
<h4 class="mt--30">package just Rs 399</h4>
<div class="slider-btn mt--30">
Book Now
</div>
</div>
</div>
</div>
<span class="herobanner-progress"></span>
</div>
<div class="single-slider home-content bg-image" data-bg="image/slider-1.jpg">
<div class="container">
<div class="row">
<div class="col-lg-10">
<h2> <span class="text-primary">Flat </span> 20% <br> off</h2>
<h4 class="mt--30">on all online bookings</h4>
<div class="slider-btn mt--30">
Book Now
</div>
</div>
</div>
</div>
<span class="herobanner-progress"></span>
</div>
</VueSlickCarousel>
In script
import VueSlickCarousel from 'vue-slick-carousel'
export default {
name: 'Home',
components: { VueSlickCarousel }
}
Any idea what I did wrong?
I found another question that solved this. Basically just change the code as follows:
<VueSlickCarousel class="petmark-slick-slider home-slider" :dots="true" :autoplay="true" :autoplaySpeed="8000" :slidesToShow="1">
<div class="single-slider home-content bg-image" v-bind:style="{'backgroundImage': 'url(\'image/slider-2.jpg\')'}">
...
...
Related
I am using bootstrap 5 carousels. I need two carousels to slide at the same time. I used data-bs-target=".carousel" but it does not work. My code is below:
<div class="section-04">
<div class="container-fluid">
<div class="row col-reverse">
<div class="col-md-6 p-left">
<div class="left-block">
<div class="row b-top">
<div class="col-md-6">
<h3>
The <br>
Most <br>
Wanted
</h3>
</div>
<div class="col-md-6">
<p>
Current favorites, new icons and the best sellers from this month.
</p>
Explore More
</div>
</div>
<div id="carouselExampleControls2" class="carousel slide carousel-sync" data-bs-interval="false" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="carousel-card">
<div class="row">
<div class="col-md-12">
<h3 class="section-text">
Petite Collection
</h3>
<hr class="mb-3">
</div>
<div class="col-md-6">
<h2>
Spoiled <br>
Lashes
</h2>
</div>
<div class="col-md-6">
<p class="card-price">
$16.00 <span>USD</span>
</p>
Add to bag <i class="bi bi-heart"></i>
</div>
<div class="col-md-12">
<hr class="mt-3">
<div class="card-reviews mb-4">
#reviews
</div>
<div class="description">
<p>
Everyday lashes made of synthetic silk material with gradient flare. The added volume on the outer corners elongates your eyes for a simple false lashes look. Choose Mini Me subtle false lashes for easy no trim, no measure application. Comes on a ¾ cotton band.
</p>
</div>
<hr class="mt-3">
Learn more
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="carousel-card">
<div class="row">
<div class="col-md-12">
<h3 class="section-text">
Petite Collection
</h3>
<hr class="mb-3">
</div>
<div class="col-md-6">
<h2>
Spoiled <br>
Lashes
</h2>
</div>
<div class="col-md-6">
<p class="card-price">
$16.00 <span>USD</span>
</p>
Add to bag <i class="bi bi-heart"></i>
</div>
<div class="col-md-12">
<hr class="mt-3">
<div class="card-reviews mb-4">
#reviews
</div>
<div class="description">
<p>
Everyday lashes made of synthetic silk material with gradient flare. The added volume on the outer corners elongates your eyes for a simple false lashes look. Choose Mini Me subtle false lashes for easy no trim, no measure application. Comes on a ¾ cotton band.
</p>
</div>
<hr class="mt-3">
Learn more
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="carousel-card">
<div class="row">
<div class="col-md-12">
<h3 class="section-text">
Petite Collection
</h3>
<hr class="mb-3">
</div>
<div class="col-md-6">
<h2>
Spoiled <br>
Lashes
</h2>
</div>
<div class="col-md-6">
<p class="card-price">
$16.00 <span>USD</span>
</p>
Add to bag <i class="bi bi-heart"></i>
</div>
<div class="col-md-12">
<hr class="mt-3">
<div class="card-reviews mb-4">
#reviews
</div>
<div class="description">
<p>
Everyday lashes made of synthetic silk material with gradient flare. The added volume on the outer corners elongates your eyes for a simple false lashes look. Choose Mini Me subtle false lashes for easy no trim, no measure application. Comes on a ¾ cotton band.
</p>
</div>
<hr class="mt-3">
Learn more
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 p-right p-0 ">
<div class="right-block">
<div id="carouselExampleControls" class="carousel slide carousel-sync" data-bs-interval="false" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="carousel-img-container jalign">
<img src="https://cdn.shopify.com/s/files/1/0612/9139/7358/files/img-30.png?v=1638393794" alt="lashes">
</div>
</div>
<div class="carousel-item">
<div class="carousel-img-container jalign">
<img src="https://cdn.shopify.com/s/files/1/0612/9139/7358/files/img-30.png?v=1638393794" alt="lashes">
</div>
</div>
<div class="carousel-item">
<div class="carousel-img-container jalign">
<img src="https://cdn.shopify.com/s/files/1/0612/9139/7358/files/img-30.png?v=1638393794" alt="lashes">
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target=".carousel" 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=".carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
</div>
Delete it all and begin again. Your carousel will surely be easier. Nothing in your code is making life easy for you. Columns inside Columns inside Rows which are also Columns and all with various additional Class....... Let's start again....
<section>
<div class="container">
<div clss="row">
<!-- Carousel from GetBootstrap.com Version 5 -->
</div>
</div>
</section>
I have to build a shoppinglist where I can add and delete lists.
On the right side there is the currently opened list with the list headline.
When deleting a list, the headline should disappear, but it doesn´t, neither with empty(), nor remove() or text(' ').
I just edited the post so you can see the whole HTML code
HTML:
<div class="container">
<div class="row">
<div class="col-sm-4">
<div id="shoppinglist">
<div class="header left">
<h2>Listen</h2>
<i class="glyphicon glyphicon-plus newList" ></i>
</div>
<ul class="list lists">
<!-- -->
</ul>
</div>
</div>
<div class="col-sm-8">
<div class="header right">
<i class="glyphicon glyphicon-search"></i>
<i class="glyphicon glyphicon-menu-hamburger"></i>
<img src="img/profile.png" alt="profilbild">
</div>
<div id="listbody">
<div class="listheader">
<!--<h1>List 1</h1>-->
</div>
<div id="listitems">
<div class="items_container">
<!-- -->
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div id="categorylist">
<div class="header">
<h2>Kategorien</h2>
</div>
<ul class="list categories">
<!-- -->
</ul>
</div>
</div>
<div class="col-sm-8">
<div class="header">
<input placeholder="Was willst du Einkaufen?" type="text" />
</div>
<div id="categoryitems">
<div class="items_container">
<!-- -->
</div>
</div>
</div>
</div>
<div id="producthover_container">
<div id='producthover'>
<div id='producthover_icon'>
<i class='glyphicon glyphicon-plus'></i>
</div>
<div id='producthover_detail'>
<span>Details <br> hinzufügen</span>
</div>
</div>
</div>
</div>
list.js:
printHeader(){
$(".listheader").empty();
$(".listheader").append("<h1 class='h1header'>" + this.name + "</h1>");
}
shoppinglist.js:
$(".lists").on("click","i",(e) =>{
let r = confirm("Delete?");
if(r) {
$(".h1header").remove();
$(e.target).parent().remove();
}
});
you have to Remove it from the parent node. like this:
var child = $(".h1header");
$(".listheader").removeChild(child);
or you will have to create a function that does this when given a child node
I am currently working on laravel 5.2.I am trying to make a comment section for each post.Here's my blade view,
`
<div class="row">
<section class="col-md-12">
#foreach($storages as $storage)
#if($storage->post_id==$post->id)
<div id="jumbo3" class="jumbotron">
<div class="row" id="rlr">
<section class="col-md-offset-1 col-md-2">
<img id="imagesize8" class="img-circle" src="/src/uploads/avatars/{{$storage->user->avatar}}"/>
</section>
<section class="col-md-3">
<a id="user10" href=""><h5 id="h52">{{$storage->user->getNameOrUsername() }}</h5></a>
</section>
<section class="col-md-offset-3 col-md-3">
<span id="rmvsgn1" class="glyphicon glyphicon-remove-sign"></span>
</section>
</div>
#if($storage->comment==0)
<div class="row">
{{ $storage->textcomment}}
</div>
#endif
#if($storage->textcomment==0)
<div class="row">
<img src="{{$storage->comment}}"/>
</div>
#endif
#endif
#endforeach
</section>
</div>
<button class="see-more">See Comments</button>
</div>
</div>
#endif
#endforeach
I am trying to display the comments by clicking on the comment section,here's my jquery,
<script>
$(document).ready(function () {
$('.jumbotron').hide('.jumbotron');
$('.see-more').click(function () {
$('.jumbotron').toggle('.jumbotron');
});
});
</script>
but every time I am trying to get it for one section,it opens up for all posts.
$(document).ready(function() {
$(".see-more").click(function(){
$(this).prev( ".content" ).toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div class="article">
<div class="content">
Content 1
</div>
<button class="see-more">
See more
</button>
</div><div class="article">
<div class="content">
Content 2
</div>
<button class="see-more">
See more
</button>
</div><div class="article">
<div class="content">
Content 3
</div>
<button class="see-more">
See more
</button>
</div><div class="article">
<div class="content">
Content 4
</div>
<button class="see-more">
See more
</button>
</div><div class="article">
<div class="content">
Content 5
</div>
<button class="see-more">
See more
</button>
</div>
<div class="article">
<div class="content">
Content 6
</div>
<button class="see-more">
See more
</button>
</div>
</body>
</html>
I'm trying to display the details of an email side by side (this is only a section of the full page) but the details from the row containing the from/to and date/cc/bcc information overlap a lot before stacking when the page resizes and I'd like them to stack before this problem arises. The following is the simplified version of what I have:
<div>
<div class="row">
<div class="col-xs-10">
<span style="font-weight:bold;" data-bind="text:Subject"></span>
</div>
<div class="col-xs-2">
<button class="btn btn-default" style="float:right; height:30px;">
<img src="..." style="max-height:20px; border:none;" />
</button>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-2">
<div class="row">
<div class="col-xs-12">From: </div>
<div class="col-xs-12"> </div>
<div class="col-xs-12">To: </div>
</div>
</div>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-12">FromName</div>
<div class="col-xs-12">email</div>
<div class="col-xs-12">ToName</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-2">
<div class="row">
<div class="col-xs-12">Date: </div>
<div class="col-xs-12">Cc: </div>
<div class="col-xs-12">Bcc: </div>
</div>
</div>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-12">date</div>
<div class="col-xs-12">Cc address</div>
<div class="col-xs-12">Bcc address</div>
</div>
</div>
</div>
</div>
</div>
<div>
Bootply Example
Columns overlap because the col-xs-2 is too small for the content in it:
<div class="col-xs-2">
<div class="row">
<div class="col-xs-12">From: </div>
<div class="col-xs-12"> </div>
<div class="col-xs-12">To: </div>
</div>
</div>
Inspect with Dev tools the <div class="col-xs-2"> which contains From: to see that when the text overlaps the content area is smaller than the text length.
To solve it you can change the col-xs-NUMBER for a bigger NUMBER (try with 4) also changing the detailed column (to 8, if you replace the previous with 4).
I'm working on this site here. http://opennetsummit.wpengine.com/
The three images in the second section down trigger the bootstrap collapse function on click. I'd like them to show on hover, and hide when not hovering.
What do I need to change?
<script>
$(".paneltab1").hover(
function() {
$('#collapsePanel1').collapse('show');
}, function() {
$('#collapsePanel1').collapse('hide');
}
);
</script>
<div class="row panel-heading">
<div class="container">
<div class="col-xs-3">
<a class="paneltab1" data-toggle="collapse" href="#collapsePanel1" aria-expanded="false" aria-controls="collapsePanel1">
<div class="panel-tabs">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-rocket-icon.png">
<h3>Workshops</h3>
</div>
</a>
</div>
<div class="col-xs-3 ">
<a class="" data-toggle="collapse" href="#collapsePanel2" aria-expanded="false" aria-controls="collapsePanel2">
<div class="panel-tabs">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-circles-icon.png">
<h3>Open Networking Summit</h3>
</div>
</a>
</div>
<div class="col-xs-3 ">
<a class="" data-toggle="collapse" href="#collapsePanel3" aria-expanded="false" aria-controls="collapsePanel3">
<div class="panel-tabs">
<div>
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
<h3>Webinars</h3>
</div>
</div>
</a>
</div>
<div class="col-xs-3 ">
<div class="panel-tabs">
<div class="mid-form">
<h3>Get Updates</h3>
</div>
</div>
</div>
</div>
</div>
<div class="collapse" id="collapsePanel1">
<div class="row">
<div class="container">
<div class="col-xs-12 hompage-panel">
<div class="col-sm-4 center">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
</div>
<div class="col-sm-8">
<h2>Defy Protocol </h2>
<h1>EMBRACE {OPEN} SOFTWARE</h1>
<h3>Open Networking Summit</h3>
<hr>
<p>June 15 - 18, 2015</p>
<p>Santa Clara Convention Center</p>
More Information
</div>
</div>
</div>
</div>
</div>
<div class="collapse" id="collapsePanel2">
<div class="row">
<div class="container">
<div class="col-xs-12 hompage-panel">
<div class="col-sm-4 center">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
</div>
<div class="col-sm-8">
<h2>Panel 2 </h2>
<h1>EMBRACE {OPEN} SOFTWARE</h1>
<h3>Open Networking Summit</h3>
<hr>
<p>June 15 - 18, 2015</p>
<p>Santa Clara Convention Center</p>
More Information
</div>
</div>
</div>
</div>
</div>
<div class="collapse" id="collapsePanel3">
<div class="row">
<div class="container">
<div class="col-xs-12 hompage-panel">
<div class="col-sm-4 center">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
</div>
<div class="col-sm-8">
<h2>Panel 3 </h2>
<h1>EMBRACE {OPEN} SOFTWARE</h1>
<h3>Open Networking Summit</h3>
<hr>
<p>June 15 - 18, 2015</p>
<p>Santa Clara Convention Center</p>
More Information
</div>
</div>
</div>
</div>
You can use jquery's hover along with bootstrap's collapse javascript, something like this:
$(".panel-tabs").hover(
function() {
$('#collapsePanel3').collapse('show');
}, function() {
$('#collapsePanel3').collapse('hide');
}
);
The first function(){} is for when the mouse enters, the second for when it leaves.
More info here:
http://api.jquery.com/hover/
http://getbootstrap.com/javascript/#collapse-methods
I changed the class from "collapse" to "collapse in" on mouseover and from "collapse in" to "collapse" on mouseout using GetElementbyID and it worked fine.
document.getElementById("panelid").className = "collapse in";