I have owl carousel 2 slider and I'm using parallax.js to create parallax effect on div background. https://pixelcog.github.io/parallax.js/
My problem: slider dots does not switch the images - when I click to any dot, there is always the first slide. The same with autoplay. Can anybody help me with this? Thanks!
Here is my code:
<div class="parallax-container">
<div class="parallax-slider">
<div class="owl-carousel slider">
<div class="slider-item thumbnail-cover d-flex flex-column justify-content-center"
style="height: 100vh"
data-bleed="50" data-speed="0.2" data-parallax="scroll" data-image-src="https://images.pexels.com/photos/2122831/pexels-photo-2122831.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
<div class="dust"></div>
<div class="slider-desc">
<h2>slide 1</h2>
</div>
</div>
<div class="slider-item thumbnail-cover d-flex flex-column justify-content-center"
style="height: 100vh"
data-bleed="50" data-speed="0.2" data-parallax="scroll" data-image-src="https://images.pexels.com/photos/2212890/pexels-photo-2212890.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
<div class="dust"></div>
<div class="slider-desc">
<h2>slide 2</h2>
</div>
</div>
<div class="slider-item thumbnail-cover d-flex flex-column justify-content-center"
style="height: 100vh"
data-bleed="50" data-speed="0.2" data-parallax="scroll" data-image-src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260">
<div class="slider-desc">
<h2>slide 3</h2>
</div>
</div>
</div></div></div>
And my js:
$(".slider").owlCarousel({
items: 1,
loop: true,
nav: true,
dots: true,
margin: 0,
animateIn: 'fadeIn',
animateOut: 'fadeOut',
autoplay: true,
smartSpeed: 1000,
autoplaySpeed: true,
autoplayHoverPause: true,
// navContainer: '#owl-reviews .owl-nav',
// dotsContainer: '#owl-reviews .owl-dots'
});
I was trying this https://github.com/pixelcog/parallax.js/pull/88 but it does not work. Please for help :)
Try this it works for me i use 2 items:
$(".slider").owlCarousel({
items:2,
nav:true,
animateIn: 'fadeIn',
animateOut: 'fadeOut',
autoplay: true,
smartSpeed: 30000,
dots:false,
navText: [
"<i class='fa fa-angle-left'></i>",
"<i class='fa fa-angle-right'></i>"
],
responsive: {
0: {
items: 1,
slideBy:1
},
480: {
items: 1,
slideBy:1
},
960: {
items: 2,
slideBy:1
},
}
});
Related
I am using ionrangeslider in a modal
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content" style="width: auto;margin: 0 auto">
<!-- Modal body -->
<div class="modal-body">
<input type="text" id="mySlider"/>
</div>
</div>
</div>
</div>
I get some values from ajax and after that i set the to and from for the slider like
$(document).ready(function () {
$('#mySlider').ionRangeSlider({
grid: false,
type: 'double',
min: 1,
max: 10,
force_edges: true,
drag_interval: true,
step: 1,
});
$.ajax({
url: "/get_schedule_for_zone/",
type: 'POST',
headers: { 'X-CSRFToken': csrftoken },
data: {"deviceassigned_id": parseInt(deviceassigned_id),"zone_number": parseInt(zone_number)},
success: function(res) {
$('#mySlider').data("ionRangeSlider").update({from: res.to})
$('#mySlider').data("ionRangeSlider").update({to: res.from})
$('$myModal').modal('show')
},
error : function(xhr,errmsg,err) {
console.log(err)
}
})
})
what i found it the modal open and then shows the slider without to and from, and then updated the to and from. the user can see that they are changing from nothing to some values
how to set them before i open the modal and show them there.
if your slider is inside a div, just hide it:
<div id="slider">
<input type="text" class="js-range-slider" id="test" name="my_range" value=""
data-min="40"
data-max="210"
data-from="{{row2.7}}"
data-grid="true"
data-hide-min-max="true"
data-postfix="'F"
data-type="double"
/>
</div>
$("#slider").hide();
and after displaying you modal, (or just before)
$("#slider").show();
other solution is to play with opacity
I am using owl.carousel in my vue app. But carousel is not showing up on the page. I have include (owl.carousel.min.css) and other relevant files(jquery,bootstrap) inside my index.html. These files can also be seen in network tab of the browser which mean files are loading but no carousel(or images) are seen.When I remove owl.carousel.min.css from index, it displays images used inside carousel on top of one another but no carousel. Any idea what the issue might be..??Thank you.
<div class="banner-slider">
<div class="container">
<div class="row">
<div class="carousel-wrap">
<div id="sync2" class="navigation-thumbs owl-
carousel">
<div class="item">
<img src="./images/bslide4.png">
<div class="details">
<p>Alex</p>
<small>Guitarist</small>
</div>
</div>
<div class="item">
<img src="./images/bslide1.png">
<div class="details">
<p>MIRA</p>
<small>Filmmaking</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And
var sync1 = $(".slider");
var sync2 = $(".navigation-thumbs");
var thumbnailItemClass = '.owl-item';
var slides = sync1.owlCarousel({
video:true,
startPosition: 3,
items:1,
loop:true,
margin:10,
autoplay:true,
autoplayHoverPause:false,
nav: false,
dots: true,
responsive: {
0: {
items: 1,
loop:true
},
600: {
items: 1,
loop:true
},
1000: {
items: 1,
loop:true
}
}
}).on('changed.owl.carousel', syncPosition);
I want to use the 'dropdown' css in my nav bar, so I create a component;
Here is the header component:
<template>
<no-ssr>
<div>
<ul id='dropdown' class='dropdown-content'>
<li>one</li>
<li>two</li>
<li class="divider" tabindex="-1"></li>
<li>three</li>
<li><i class="material-icons">view_module</i>four</li>
<li><i class="material-icons">cloud</i>five</li>
</ul>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper">
<div class="container">
<i class="material-icons right">home</i>Home
<ul class="right hide-on-med-and-down">
<li><a class="dropdown-button" data-activates="dropdown" data-beloworigin="true" data-hover="true">Dopdown<i
class="material-icons right">arrow_drop_down</i></a></li>
<li>About</li>
<li>Contact</li>
<li><i class="material-icons right">search</i>Search</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</no-ssr>
</template>
I didn't run npm install stuff... like that, I just import the materialize css through CDN;
Here is my nuxt.config.js:
head: {
title: pkg.name,
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: pkg.description }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' },
{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css'}
],
script: [
{ src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' },
{ src: 'https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js' }
]
},
When I run 'npm run dev' in localhost, The 'dropdown' didn't work;
When I move my mouse on the button, nothing happened, when I click the button, nothing happened either.
And I got the error by accident,
Could anybody help me solve this problem? I really appreciate it.
First you need a Button/Link which opens your first Dropdown. (Note the "data-target"-Attribute)
<!-- Dropdown Trigger -->
<a class='dropdown-trigger btn' href='#' data-target='dropdown1'>Drop Me!</a>
<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
<li>one</li>
<li>two</li>
<li class="divider" tabindex="-1"></li>
<li>three</li>
<li><i class="material-icons">view_module</i>four</li>
<li><i class="material-icons">cloud</i>five</li>
</ul>
Then you need to initialize this button:
$('.dropdown-trigger').dropdown();
See https://materializecss.com/dropdown.html
Finally, it works. I add the Initialization in mount() function,
Here is the code
mounted() {
$('.dropdown-button').dropdown({
inDuration: 300,
outDuration: 225,
constrainWidth: true, // Does not change width of dropdown to that of the activator
hover: true, // Activate on hover
gutter: 0, // Spacing from edge
belowOrigin: true, // Displays dropdown below the button
alignment: 'left', // Displays dropdown with edge aligned to the left of button
stopPropagation: false // Stops event propagation
}
);
}
Hello I have here one code with two "todo list" implementations in Vuejs but I have a problem.
1 Using a vue component i am getting a waring about how to use the parent variable.
2 Doing it on the main function I cannot keep the old value for the discard implementation.
please find the working code
Running! todo list in codepen
Vue.component('ntodo-item', {
template: '\
<transition name="fade">\
<div id="if" class="row" v-if="edit">\
<div class="col-md-7">\
<input class="form-control" v-model="title">\
</div>\
<div id="sssss" class="col-md-5">\
<button class="btn btn-danger roundButton" v-on:click="$emit(\'edit\')">Discard</button>\
<button class="btn btn-success roundButton" v-on:click="updateValue">Save</i></button>\
</div>\
</div>\
<div id="else" class="row" v-else>\
<div class="col-md-7">\
{{ title }}\
</div>\
<div id="ssaaas" class="col-md-5">\
<button class="btn btn-danger roundButton" v-on:click="$emit(\'remove\')">Remove</button>\
<button id="aaa" class="btn btn-default roundButton" v-on:click="$emit(\'edit\')">Edit</button>\
</div>\
</div>\
</transition>\
',
props: [
'title' ,
'edit'
],
methods: {
updateValue: function () {
this.$emit('input', this.title);
}
}
})
var app14 = new Vue({
el: '#app-14',
data: {
newTodoText: '',
newTodoText2: '',
todos: [
{
id: 1,
title: 'Do the dishes',
edit:0
},
{
id: 2,
title: 'Take out the trash',
edit:0
},
{
id: 3,
title: 'Mow the lawn',
edit:0
}
],
todos2: [
{
id: 1,
title: 'Do the dishes',
edit:0
},
{
id: 2,
title: 'Take out the trash',
edit:0
},
{
id: 3,
title: 'Mow the lawn',
edit:0
}
],
nextTodoId: 4,
nextTodoId2: 4
},
methods: {
addNewTodo: function () {
this.todos.push({
id: this.nextTodoId++,
title: this.newTodoText,
edit:0
})
this.newTodoText = ''
this.todos = _.orderBy(this.todos, 'id', 'desc');
},
editTodo: function (item){
// console.log(item.title)
item.edit^= 1
},
updateValue: function (item, newValue){
item.title=newValue
item.edit^= 1
},
addNewTodo2: function () {
this.todos2.push({
id: this.nextTodoId2++,
title: this.newTodoText2,
edit:0
})
this.newTodoText2 = ''
this.todos2 = _.orderBy(this.todos2, 'id', 'desc');
},
editTodo2: function (item){
console.log(item.title)
item.edit^= 1
},
deleteTodo2: function (item){
this.todos2.splice(item.id, 1);
},
updateValue2: function(text){
console.log(text);
}
}
})
.fade-enter-active, .fade-leave-active {
transition: opacity 0.3s, transform 0.3s;
transform-origin: left center;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
transform: scale(0.5);
}
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.13/dist/vue.js"></script>
<div class="col-md-12">
<div class="graybox">
<h5>app14</h5>
<div id="app-14">
`enter code here`<div class="row">
<div class="col-md-6">
<h5> todo list using "ntodo-item" component</h5>
<p>This one show me a warning because the child cannot edit the va passed by the parent but it is working and spected</p>
<input class="form-control"
v-model="newTodoText"
v-on:keyup.enter="addNewTodo"
placeholder="Add a todo"
>
<hr>
<ul>
<li
is="ntodo-item"
v-for="(todo, index) in todos"
v-bind:key="todo.id"
v-bind:title="todo.title"
v-bind:edit="todo.edit"
v-on:input="updateValue(todo, $event)"
v-on:remove="todos.splice(index, 1)"
v-on:edit="editTodo(todo)"
></li>
</ul>
</div>
<div class="col-md-6">
<h5> todo list update</h5>
<p> This one is working without any warn but I dont know how to discard changes. I dont want to create a temp var because I want to be able to edit all of them at the same time. </p>
<input v-model="newTodoText2"
v-on:keyup.enter="addNewTodo2"
placeholder="Add a todo"
class="form-control"
>
<hr>
<ul>
<transition-group name="fade" >
<li v-for="(todo2, index) in todos2":key="todo2.id">
<div id="if" class="row" v-if="todo2.edit">
<div class="col-md-7">
<input class="form-control" ref="todo2" v-model="todo2.title">
</div>
<div id="sssss" class="col-md-5">
<button class="btn btn-success roundButton" v-on:click="editTodo2(todo2)">ok</button>
</div>
</div>
<div id="else" class="row" v-else>
<div class="col-md-7">
{{todo2.title}}
</div>
<div id="ssaaas" class="col-md-5">
<button class="btn btn-danger roundButton" v-on:click="todos2.splice(index, 1)">Remove</button>
<button id="aaa" class="btn btn-default roundButton" v-on:click="editTodo2(todo2)">Edit</button>
</div>
</div>
</li>
</transition>
</ul>
</div>
</div>
</div>
</div>
</div>
.
Echoing my comment:
Create a local variable copy of your title prop and emit that variable's changes on edit. If they discard the edit just reset the local variable to the value of the title prop. Working example on CodeSandbox here.
Todo Item Component
<button class="btn btn-danger roundButton" #click="discardEdit">Discard</button>
...
data() {
return {
// our local copy
localTitle: null,
};
},
mounted() {
this.localTitle = this.title;
},
methods: {
updateValue: function() {
this.$emit("input", this.localTitle);
},
discardEdit: function() {
// just set local back to title prop value
this.localTitle = this.title;
this.$emit('edit');
},
}
This must be fairly simple, but I'm puzzled.
The content divs disappear on sorting.
And I missing the correct data-filter? Or a display:none or display:block?
Codepen: http://codepen.io/anon/pen/oYXXPq (You can clone it to make changes.)
HTML:
<ul id="filters">
<li>Everything</li>
<li>Blog</li>
<li>CISO</li>
<li>LABS</li>
</ul>
<div class="container-fluid">
<div id="isotope-blog">
<div class="grid">
<div class="grid-sizer col-xs-12 col-md-6"></div>
<div class="grid-item item col-xs-12 col-md-6">
<div class="grid-item-content blog">Blog Blog Blog</div>
</div>
<div class="grid-item item col-xs-12 col-md-6">
<div class="grid-item-content blog">Blog Blog Blog</div>
</div>
<div class="grid-item item col-xs-12 col-md-6">
<div class="grid-item-content ciso">CISO CISO CISO</div>
</div>
<div class="grid-item item col-xs-12 col-md-6">
<div class="grid-item-content labs">LABS LABS LABS</div>
</div>
<div class="grid-item item col-xs-12 col-md-6">
<div class="grid-item-content labs">LABS LABS LABS</div>
</div>
<div class="grid-item item col-xs-12 col-md-6">
<div class="grid-item-content labs">LABS LABS LABS</div>
</div>
<div class="grid-item item col-xs-12 col-md-6">
<div class="grid-item-content ciso">CISO CISO CISO</div>
</div><div class="grid-item item col-xs-12 col-md-6">
<div class="grid-item-content security-blog">BLOG BLOG BLOG</div>
</div>
</div>
</div>
</div>
CSS:
.grid-item-content {
max-height: 120px;
background: #0D8;
border: 2px solid #000;
overflow:hidden;
}
.container-fluid {
max-width:1200px;
}
jQuery:
jQuery(function ($) {
var $container = $('#isotope-blog'); //The ID for the list with all the blog posts
$container.isotope({ //Isotope options, 'item' matches the class in the PHP
itemSelector : '.item',
layoutMode : 'masonry'
});
//Add the class selected to the item that is clicked, and remove from the others
var $optionSets = $('#filters'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents('#filters');
$optionSets.find('.selected').removeClass('selected');
$this.addClass('selected');
//When an item is clicked, sort the items.
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
});
});
This now works: http://codepen.io/anon/pen/oYXXPq
It is a two column Masonry and Bootstrap layout sortable by a filter class in the grid-item div element. The filter class can be multiple, different classes.
Problems were:
My HTML markup was too complex and wrong; it needs to be in the format:
<div class="container">
<div class="isotope-list">
<div class="row">
<div class="grid-item blog">OneOneOneOne Blog Blog Blog</div>
<div class="grid-item blog">TwoTwoToTwoTwoTwo Blog Blog Blog </div>
and on and on...
</div>
</div>
There were small changes needed to the CSS.
And my Javascript needed to make and clear updates to the selected categories:
var selectedCategory;
var $grid = $('.isotope-list').isotope({
itemSelector: '.grid-item',
masonry: {
columnWidth: 160,
gutter: 20
},
getSortData: {
selectedCategory: function( itemElem ) {
return $( itemElem ).hasClass( selectedCategory ) ? 0 : 1;
}
}
});
var $items = $('.row').find('.grid-item');
$('.sort-button-group').on( 'click', '.button', function() {
// set selectedCategory
selectedCategory = $( this ).attr('data-category');
if ( selectedCategory == 'all' ) {
$grid.isotope({
sortBy: 'original-order'
});
}
// update sort data now that selectedCategory has changed
$grid.isotope('updateSortData');
$grid.isotope({ sortBy: 'selectedCategory' });
});
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});