I'am migrating a template from odoo 12 to Odoo 14 and using "owl.carousel" and other JS, and none of them work. I got these errors when implementing owl.carousel :
odoo.define('website_theme.frontend_layout', function (require) {
'use strict';
$('.class1').owlCarousel({
navigation : true,
loop:true,
margin:10,
responsive:{
0:{ items:1
},
1000:{ items:2
},
2000:{
items:3}
}
})
$('.class2').vegasMenu();
});
<div class="d-none d-xl-block header-top">
<div class="container">
<div class="row align-items-center">
<div class="col-md-4 col-lg-7">
<div class="class1 owl-carousel owl-theme">
<div class="item">
</div>
<div class="item">
</div>....
Any help please? How can I solve it ?
You missed a comma on the navigation line
Related
I am working on a reactjs application and I am using owl carousel npm module to show some data.
I am having a component which only renders owl carousel , for that I installed owl carousel and importing like below
import OwlCarousel from 'react-owl-carousel';
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel/dist/assets/owl.theme.default.css';
and below is the render method
render() {
const options = {
nav: true,
navText:["<div className='nav-btn prev-slide'></div>","<div className='nav-btn next-slide'></div>"],
rewind: false,
autoplay: true,
slideBy: 1,
dots: true,
dotsEach: true,
dotData: true
};
if(!this.state.response) return(<div>Loading...</div>);
return (
<div className="container">
<div className="PageHeading">
<div className="row">
<div className="col-md-8 col-sm-8 col-xs-12"><h4>Latest Published</h4></div>
<div className="col-md-4 col-sm-4 col-xs-12 text-right"><Link to="/">View All <i className="arrow_carrot-right"></i></Link></div></div>
</div>
<br />
<OwlCarousel ref="gallery" margin={15} loop autoplay={true} items={6} options={options}>
{
this.state.response.map((obj,key)=>
<div className="" key={key}>
<div className="subcategories_blockCard">
<Link to={'/book/'+obj.book_title.split(' ').join('-')}>
<img src={'http://localhost:3001/'+obj.book_cover} style={{'width':'100%'}} title={obj.book_title}/>
{/* <div className="card-content">{obj.book_title}</div> */}
</Link>
</div>
</div>
)
}
</OwlCarousel>
</div>
)
}
Now, problem is that when the application get started carousel items not visible and when I click any link which contains the root path http://localhost:3000/ (suppose the logo of the application contains href of http://localhost:3000/ and when click on logo which is <img src="logo.png />) then carousel gets appear on the page.
I don't know how to fix it,
Please help me.
I guess your problem is that you are not using setState to change the state.
I am searching using algolia search. Everything works but instead of the search result to displaying in columns it's only showing in a list format
This is the display in normal html code
but when algolia search result is used to populate the container using the code below this is what it shows
I have this html file
<div class="row isotope-grid" id="hits" >
<!-- Load more -->
<div class="flex-c-m flex-w w-full p-t-45">
<a href="#" class="flex-c-m stext-101 cl5 size-103 bg2 bor1 hov-btn1 p-lr-15 trans-04">
Load More
</a>
</div>
</div>
this is the JS format
var search = instantsearch({
// Replace with your own values
appId: 'E525782525525',
apiKey: 'xxxxxxxxx,
indexName: 'Listing',
urlSync: true,
searchParameters: {
query: "2",
// hitsPerPage: 10
}
});
search.addWidget(
instantsearch.widgets.hits({
container: '#hits',
templates: {
empty: 'No results',
item: `
<div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item ">
<!-- Block2 -->
<div class="block2">
<div class="block2-pic hov-img0">
<img src="images/product-03.jpg" alt="IMG-PRODUCT">
<a href="#" class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1">
Quick View
</a>
</div>
<div class="block2-txt flex-w flex-t p-t-14">
<div class="block2-txt-child1 flex-col-l ">
<a href="product-detail.html" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6">
Only Check Trouser
</a>
<span class="stext-105 cl3">
$25.50
</span>
</div>
<div class="block2-txt-child2 flex-r p-t-3">
<a href="#" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2">
<img class="icon-heart1 dis-block trans-04" src="images/icons/icon-heart-01.png" alt="ICON">
<img class="icon-heart2 dis-block trans-04 ab-t-l" src="images/icons/icon-heart-02.png" alt="ICON">
</a>
</div>
</div>
</div>
</div>
`
,
}
})
);
search.start();
I have been able to rule out the css and discovered that ALgolia is overriding the display. How do I modify the code to show a custom display of columns instead of the default Algolia list display?
after implementing Dipen Shah's answer, it partially worked and produced to wierd overlap upon rendering but the overlapp disappears if the window is width or height is decreased and return back to full size.
here is what the overlap looks like
Your code is missing very crucial function call which is why your search result is not being rendered properly.
Remove isotope-grid class from div#hits
<!-- Load more -->
<div class="row" id="hits">
<div class="flex-c-m flex-w w-full p-t-45">
<a href="#" class="flex-c-m stext-101 cl5 size-103 bg2 bor1 hov-btn1 p-lr-15 trans-04">
Load More
</a>
</div>
</div>
Initialize hits div with isotope grid after search result is render.
search.on('render', function(){
$grid = $("#hits");
$grid.isotope('destroy');
$grid.isotope({
itemSelector: '.isotope-item',
layoutMode: 'fitRows',
percentPosition: true,
animationEngine : 'best-available',
masonry: {
columnWidth: '.isotope-item'
}
});
});
After this changes, search result will be rendered correctly.
Explanation:
In the original theme file, on page load event script calls following call to initialize grids.
$(window).on('load', function () {
var $grid = $topeContainer.each(function () {
$(this).isotope({
itemSelector: '.isotope-item',
layoutMode: 'fitRows',
percentPosition: true,
animationEngine : 'best-available',
masonry: {
columnWidth: '.isotope-item'
}
});
});
});
When algolia widget renders search result, your template sets correct css classes but you still need to initialize isotope grid for your search result container. My code does exactly that by intercepting render event of the widget.
Problem
I don't think you're using the correct method for a template.
The docs for Aloglia gives this example:
Javascript:
search.addWidget(
instantsearch.widgets.hits({
container: '#hits',
templates: {
item: document.getElementById('hit-template').innerHTML,
empty: "We didn't find any results for the search <em>\"{{query}}\"</em>"
}
})
);
HTML:
<!-- Add this to your HTML document -->
<script type="text/html" id="hit-template">
<div class="hit">
<div class="hit-image">
<img src="{{image}}" alt="{{name}}">
</div>
<div class="hit-content">
<h3 class="hit-price">${{price}}</h3>
<h2 class="hit-name">{{{_highlightResult.name.value}}}</h2>
<p class="hit-description">{{{_highlightResult.description.value}}}</p>
</div>
</div>
</script>
Solution
This means you need something like this: (replacing the placeholders accordingly)
Javascript:
// Replace with your own values
appId: 'E525782525525',
apiKey: 'xxxxxxxxx,
indexName: 'Listing',
urlSync: true,
searchParameters: {
query: "2",
// hitsPerPage: 10
}
});
search.addWidget(
instantsearch.widgets.hits({
container: '#hits',
templates: {
empty: 'No results',
item: document.getElementById('hit-template').innerHTML,
}
})
);
search.start();
HTML:
<!-- Add this to your HTML document -->
<script type="text/html" id="hit-template">
<div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item ">
<!-- Block2 -->
<div class="block2">
<div class="block2-pic hov-img0">
<img src="{{image}}" alt="{{name}}">
Quick View
</div>
<div class="block2-txt flex-w flex-t p-t-14">
<div class="block2-txt-child1 flex-col-l ">
${{product_name}}
<span class="stext-105 cl3">${{price}}</span>
</div>
<div class="block2-txt-child2 flex-r p-t-3">
<a href="#" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2">
<img class="icon-heart1 dis-block trans-04" src="images/icons/icon-heart-01.png" alt="ICON">
<img class="icon-heart2 dis-block trans-04 ab-t-l" src="images/icons/icon-heart-02.png" alt="ICON">
</a>
</div>
</div>
</div>
</div>
</script>
Using owl carousel and trying to slide items five by five, now i have 5 items, i want when i push next or prev button it move to next five item, currently it move to next item, is it possible?
$('.owl-carousel').owlCarousel({
loop:true,
items:5,
margin:10,
nav:true
})
Demo
i googled and checked plugin website but couldn't find anything.
Use the slideBy options in the owlCarousel config:
$('.owl-carousel').owlCarousel({
loop:true,
items: 5,
margin:10,
slideBy: 5, // slide 5 items
nav:true
})
.item {
background: red;
}
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/css/docs.theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<div class="owl-carousel owl-theme">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
</div>
You should include slideBy: 5 or slideBy: 'page' option, as they describe it on their documentation.
https://jsfiddle.net/w3ka3vqw/151/
Hi I am using kenwheeler slick carousel but when I use ng-repeat on the div i get `listed images'.
What I a doing wrong here ?
<section class="regular slider" style="clear: both" ng-if="slides">
<div ng-repeat="slide in slides">
<img src="{{slide.path}}">
</div>
</section>
I tried the solutions provided here angular slick although its different but still no proper images are being displayed. without ng-repeat it works perfect.
The output is something like this image
My controller
$scope.single_product = function (product_id) {
$http.get('abc',
{headers:
{'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': $rootScope.keyword_auth_token}
})
.success(function (data) {
$scope.product = data;
$(".regular").slick({
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 3,
autoplay: true,
autoplaySpeed: 2000
});
})
.error(function (data) {
console.log(data);
});
};
I am including slick.css slick-theme.css and slick.jshere is the link to all Files
Instead of src Use ng-src ng-src use to get the path of image in angularJS
Go through this link carefully and apply styles
http://kenwheeler.github.io/slick/
remove div that contains ng-repeat
<section class="regular slider" style="clear: both" ng-if="slides">
<img ng-repeat="slide in slides" ng-src="{{slide.path}}">
</section>
Use ng-src
var app = angular.module("myApp", []);
app.controller('myCtrl', function($scope) {
$scope.slides = [{
path: 'https://cloud.githubusercontent.com/assets/1734769/3162502/f49ff416-eb35-11e3-8f47-3a85f8abfd84.png'
}, {
path: 'https://cloud.githubusercontent.com/assets/1734769/3162502/f49ff416-eb35-11e3-8f47-3a85f8abfd84.png'
}, {
path: 'https://cloud.githubusercontent.com/assets/1734769/3162502/f49ff416-eb35-11e3-8f47-3a85f8abfd84.png'
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<section class="regular slider" style="clear: both" ng-if="slides">
<div ng-repeat="slide in slides">
<img ng-src="{{slide.path}}">
</div>
</section>
</div>
Try this:
<div ng-repeat="slide in slides">
<img ng-src="slide.path">
</div>
Check angular-slick README and include all css and js. Add slick to your angular.module [ let say MyApp ] dependency and use slick directives. I think you missed to use slick directives.
<section class="regular slider" style="clear: both" ng-if="slides">
<slick slides-to-show=3 slides-to-scroll=3>
<div ng-repeat="slide in slides">
<img src="{{slide.path}}">
</div>
</slick>
</section>
I trying to use instafeed.js for my local site. But I don't understand why images from my account don't show?
My code
Connected instafeed.js and file where I write the script
<script type="text/javascript" src="js/instafeed.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
Section for images
<section class="instagram-wrap">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="instagram-content">
<h3>Latest Photos</h3>
<div class="row photos-wrap">
<div id="inst"></div>
</div>
</div>
</div>
</div>
</div>
</section>
and app.js with instafeed value
$(function() {
var feed = new Instafeed({
get: 'user',
userId: ID,
accessToken: 'Token',
target: 'inst',
links: true,
limit: 8,
useHttp: true,
sortBy: 'most-recent',
resolution: 'standard_resolution',
template: '<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="photo-box">
<div class="image-wrap">
<img src="http:{{image}}"/>
</div>
<div class="description">{{caption}} </div>
</div>
</div>'
});
feed.run();
});
Your code works except for this error regarding your template definition:
SyntaxError: unterminated string literal
Put all the template in one line or use \ at the end of each line to have a multi-line string literal.
Try write the template parameter inline like this:
template: '<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><div class="photo-box"><div class="image-wrap"><img src="http:{{image}}"/></div><div class="description">{{caption}} </div></div></div>'
or on line break insert \