Igor Oleniuk
Igor Oleniuk

Reputation: 145

Vue Slick Carousel can't make image as a link

I'm using vue-slick-carousel to build a slider. I have an issue with image which I wrapped as a link. When I click on image redirect doesn't happen. Also I have a title under image which I wrapped as a link too, and with text it works great, but when I click on image it doesn't. It doesn't work only on mobile devices, on desktop when I click on image it makes redirect.

Here is my code:

 <VueSlickCarousel
            ref="slick"
            v-bind="slickOptions"
            class="post-category__slider"
          >
            <div
              v-for="post in posts"
              :key="`post-${post.id}`"
              class="post-category__list-item"
            >
              <div class="row">
                <div class="col-lg-6">
                  <div
                    class="post-category__list-item-image mb-4"
                  >
                    <a
                      :href="`/${item.slug}/${post.slug}`"
                    >
                      <img
                        :src="$store.state.env.panelUrl + post.get_thumbnail"
                        :alt="post.title"
                      >
                    </a>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="d-lg-flex flex-lg-wrap flex-lg-column justify-content-lg-between h-100">
                    <div class="mb-4">
                      <h4 class="post-card__text-block-title">
                        <a :href="`/${item.slug}/${post.slug}`">
                          {{ post.title }}
                        </a>
                      </h4>
                      <div>
                        {{ post.short_story }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </VueSlickCarousel>

Upvotes: 0

Views: 1595

Answers (2)

Andrew Savetchuk
Andrew Savetchuk

Reputation: 1610

Try adding pointer-events: none to the images. It should do the trick.

Upvotes: 2

please share your properties for a better picture, also try adding only the property with its object something like this: :href="item.slug/post.slug", but for better reference provide your properties.

Upvotes: 0

Related Questions