Join our new community forum for support & discussion

Featured listings and categories in carousel format

Author

Posts
arielkbs 1 year, 2 months ago

@gabetu had already added the CSS in Customizer -> Additional CSS
https://ibb.co/0Knxgj2

All implementations were made
https://ibb.co/7jV8WdF
https://ibb.co/8cF2btk
https://ibb.co/bJSkFv5

Active JS code is causing this error
https://ibb.co/NpLxM4q

gabetu 1 year, 2 months ago

Hmm, don’t add additional class to hivepress block directly, add it to a wrapper like column or row.

Stiffcio 1 year, 2 months ago

@gabetu, you know what’s not working for me?

WWW

arielkbs 1 year, 2 months ago

Really, I didn’t understand that part, now it’s all right!
https://ibb.co/YQS5404

But I still see an error in JS when I open the chrome console
https://ibb.co/jrTMrPh
https://ibb.co/ZmHShZX

gabetu 1 year, 2 months ago

I don’t see that error on demo site, I think that the custom script must be initiated after slick.js is loaded, I’m using a child theme, code snippets are good for testing but not on live sites.
gabetu 1 year, 2 months ago

This code might help if you didn’t figured out yet:
```
function add_this_script_footer(){ ?>
<script type="text/javascript">
<strong>[INSERT HERE THE JS CODE]</strong>
</script>
<?php } 
add_action('wp_footer', 'add_this_script_footer', 20); ?>
```
arielkbs 1 year, 2 months ago

I get the following error in JS -> Uncaught SyntaxError: Unexpected token ‘<‘
See the print: https://ibb.co/q5NtgZF

Code implemented in the plugin:
https://ibb.co/xXhBW5t
https://ibb.co/mTdNRc1

arielkbs 1 year, 2 months ago

I achieved!! See how the result turned out https://anunciaunai.com.br/
On the computer it is all bugged, but on the phone it seems to have worked
On the computer: https://ibb.co/nsJpwcq

arielkbs 1 year, 2 months ago

@gabetu I cleared all browser cache, it’s back to normal now. But on the computer the carousel effect still doesn’t happen, only on the cell phone :/

Stiffcio 1 year, 2 months ago

@arielkbs I can see you’ve done something more. Can you put all your JS and css you added?
Stiffcio 1 year, 2 months ago

Ok i did it.
```
function add_this_script_footer(){ ?>
<script type="text/javascript">
[( function($) {
'use strict';
// Slider for categories
$('.slider-categories .hp-listing-categories .hp-row').slick({
    dots: false,
    infinite: false,
    speed: 2000,
    autoplay: true,
    arrows: true,
	prevArrow: '<div class="slick-arrow slick-prev"><i class="hp-icon fas fa-chevron-left"></i></div>',
	nextArrow: '<div class="slick-arrow slick-next"><i class="hp-icon fas fa-chevron-right"></i></div>',
    slidesToShow: 4,
    slidesToScroll: 1,
    responsive: [
        {
          breakpoint: 990,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 1,
             arrows: true,
            infinite: true,
          }
        },
        {
          breakpoint: 768,
          settings: {
            slidesToShow: 2,
             arrows: true,
            slidesToScroll: 1
          }
        },
        {
          breakpoint: 600,
          settings: {
            slidesToShow: 1,
             arrows: true,
            slidesToScroll: 1
          }
        },
    ]
  });
// Slider for listings
$('.slider-listings .hp-listings > .hp-row').slick({
    dots: false,
    infinite: false,
    speed: 2000,
    autoplay: true,
    arrows: true,
	prevArrow: '<div class="slick-arrow slick-prev"><i class="hp-icon fas fa-chevron-left"></i></div>',
	nextArrow: '<div class="slick-arrow slick-next"><i class="hp-icon fas fa-chevron-right"></i></div>',
    slidesToShow: 4,
    slidesToScroll: 1,
    responsive: [
        {
          breakpoint: 990,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 1,
             arrows: true,
            infinite: true,
          }
        },
        {
          breakpoint: 768,
          settings: {
            slidesToShow: 2,
             arrows: true,
            slidesToScroll: 1
          }
        },
        {
          breakpoint: 600,
          settings: {
            slidesToShow: 1,
             arrows: true,
            slidesToScroll: 1
          }
        },
    ]
  });
} (jQuery) )]
</script>
<?php } 
add_action('wp_footer', 'add_this_script_footer', 20); 
```
arielkbs 1 year, 2 months ago

@Gabetu I opened a new topic for you to teach you how you made the categories in the form of icons!

New topic: https://hivepress.io/support/topic/categories-in-the-form-of-icons/

We will be grateful!

arielkbs 1 year, 2 months ago

When activating infinite mode in carousel, this error occurs in the menu 👇
print1 https://ibb.co/Xtk6whK
print2 https://ibb.co/gTjRtcB
print3 https://ibb.co/5267dCN
gabetu 1 year, 2 months ago

Yes, I remember this, try to use infinite: false on responsive breakpoints since it’s not a big issue for user experience, or try to use a new function like this:
```
function add_this_script_footer() { ?>
<script type="text/javascript">
$.noConflict();
( function($) {
'use strict';
$(document).ready(function(){

// the full code here

});
} (jQuery) );
</script>
<?php } 
add_action('wp_footer', 'add_this_script_footer', 20); 
```
The full code is here.
arielkbs 1 year, 2 months ago

@gabetu when using this new function the carousel stops working

Removing these lines works again.

$.noConflict();

$(document).ready(function(){

gabetu 1 year, 2 months ago

As always clear the cache after making changes, it’s working, check demo here, I added centerMode: true for viewing the difference.

arielkbs 1 year, 2 months ago

@gabetu I copied exactly the same as the new function, cleared the cache, added centerMode: true But there is some error in the syntax.

arielkbs 1 year, 2 months ago

@gabetu How did you put a notification to download the app?

gabetu 1 year, 2 months ago

Check your code, it’s missing something:
…..
<script src=’https://anunciaunai.com.br/wp-content/plugins/wpforms-lite/assets/js/integrations/elementor/frontend.min.js?ver=1.7.3′ id=’wpforms-elementor-js’></script>
<script type=”text/javascript”>
$.noConflict();
(function(){
‘use strict’;
$(document).ready(function() { // this is missing
// Slider for categories
$(‘.slider-categories .hp-listing-categories .hp-row’).slick({
……..
}); // and this is missing
} (jQuery) );

Copy the relevant code from here: https://hpdirectory.xyz/cars/wp-content/themes/carhive/scripts.js, I don’t see any error on demo site.

I’m using this plugin for PWA https://wordpress.org/plugins/super-progressive-web-apps/

arielkbs 1 year, 2 months ago

Thank you so much @gabetu I’m your fan! I found the solution 👇
var $ = jQuery.noConflict();

Source: https://pt.stackoverflow.com/questions/25513/do-jquery-n%C3%A3o-funciona
Author

Posts

Viewing 20 posts - 21 through 40 (of 48 total)

New Reply

This forum has been archived and is no longer accepting new posts or replies. Please join our new community forum for support & discussion.