Join our new community forum for support & discussion

Featured listings and categories in carousel format

Author

Posts
arielkbs 1 year, 3 months ago

Featured listings and categories in carousel format can be implemented natively in the ListingHive theme, just like @gabetu did

https://hpdirectory.xyz/cars/home-3/

@gabetu if you can teach me how to make this kind of carousel I would be grateful.

ihor 1 year, 3 months ago developer

This probably requires a custom JS script along with CSS customizations. Also, maybe @gabetu offers this custom theme either for free or as a premium one.

arielkbs 1 year, 2 months ago

Reviving this topic

@gabetu can you help?!

gabetu 1 year, 2 months ago

If it’s OK for @ihor I can share the CSS & JS script.

ihor 1 year, 2 months ago developer

Sure, sharing code snippets for improving or customizing HivePress is appreciated 🙂
gabetu 1 year, 2 months ago

OK, here we go.

The CSS part:
```
/* Slick navigation */
.slider-categories .slick-arrow, .slider-listings .slick-arrow {display:flex;align-items:center;justify-content:center;color:rgba(7, 36, 86, 0.35);box-shadow:0 5px 30px rgba(7, 36, 86, 0.125);border-radius:50%;background-color:#fff;cursor:pointer;font-size:36px;transition:color 0.25s;width:2.5rem;height:2.5rem;margin-top:-1rem;position:absolute !important;z-index:99;top:40%;opacity:0.75;}
.slider-categories .slick-arrow:hover, .slider-listings .slick-arrow:hover {color:#000000;opacity:1;}
.slider-categories .slick-prev, .slider-listings .slick-prev {left:-0.5rem;}
@media only screen and (max-width: 47.99em) {
.slider-categories .slick-prev, .slider-listings .slick-prev {left:-0.75rem;}
}
.slider-categories .slick-next, .slider-listings .slick-next {right:-0.5rem;}
@media only screen and (max-width: 47.99em) {
.slider-categories .slick-next, .slider-listings .slick-next {right:-0.75rem;}
}
```
The JS part:
```
( 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) );
```
You can read more about Slick carousel settings here.

Usage:
Pay attention to .slider-categories and .slider-listings classes.
Basically you need to wrap the hivepress content (shortcode, block or elementor widget) into a div with those two classes.
```
<div class="slider-categories">
[hivepress_listing_categories] // your settings here
</div>
```
```
<div class="slider-listings">
[hivepress_listings] // your settings here
</div>
```
That’s all !
arielkbs 1 year, 2 months ago

Thank you very much!! I’m your fan @gabetu

But I’m still having difficulties implementing the code, I’m using the Code Snippets plugin

I have already implemented the css but a critical error occurs when implementing the JS on my site

Sorry, I’m a layman in codes :/
gabetu 1 year, 2 months ago

I’m not so familiar with that plugin, try to exclude the start & end lines and insert only the code between:
```
( function($) {
'use strict';

} (jQuery) );
```
arielkbs 1 year, 2 months ago

Still not working, can @ihor help?

arielkbs 1 year, 2 months ago

I found the solution to reproduce the JS code
https://hivepress.io/support/topic/hide-phone-number-attribute-class/#post-24823

But I didn’t understand how to use the slider-categories and .slider-listings classes, I’m using the Gutenberg to edit my homepage

gabetu 1 year, 2 months ago

You can use the column block as wrapper with additional CSS classes slider-categories and slider-listings see image here.

Stiffcio 1 year, 2 months ago

Hi @gabetu i did everything as you wrote and it does not work. the block has a standard appearance.

gabetu 1 year, 2 months ago

First clear the cache, if it’s not working please share a link to check.

Stiffcio 1 year, 2 months ago

should your code not contain “,” after the class ?

.slider-categories “,” .slick-arrow,

gabetu 1 year, 2 months ago

No, it’s correct .slider-categories .slick-arrow, .slider-listings .slick-arrow, there are 2 classes for different use, you may want to display listings in 4 columns but categories in 6 columns, etc.
It’s the same code here and here, it’s working and tested 🙂

arielkbs 1 year, 2 months ago

@gabetu the CSS code was implemented and the JS code was also implemented using Code Snippets, I added the additional CSS classes as shown in the print, I cleared the cache and nothing changed!

gabetu 1 year, 2 months ago

First, the carousel output is visible on the live page and not on edit page / block.
Second, without an url is difficult to say what is not working.
Third, I think that is better to use a child theme for custom css, php and js codes.

arielkbs 1 year, 2 months ago

Here is the link https://anunciaunai.com.br/

gabetu 1 year, 2 months ago

Hmmm,
I don’t see the CSS code loaded, also the class for wrapper is not present:
<h2 class=”has-text-align-center content-title” id=”destaques”>Destaques</h2>
<div class=”hp-listings hp-block hp-grid”><div class=”hp-row”>

And as advice, first you complete all the css and js modifications you need and then you enable their minification.

Try to add the CSS code in Customizer -> Additional CSS.

Stiffcio 1 year, 2 months ago

@gabetu
I have it all added up, but I have some bug in JS.
Link www
Author

Posts

Viewing 20 posts - 1 through 20 (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.