Materializecss carousel with custom cards

user_18982716 0
Viewed 38

trying to use materializecss carousel with cards instead of just images [such that image is to the left and texts are to the right side of the card], the anchor tag "<a class="carousel-item">" is making the problem, I remove it and my card is in proper shape but then not able to move the cards around, when I keep it in, it takes the images out of the cards and messes up.

/*materializecss*/
.carousel {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 400px;
  perspective: 500px;
  transform-style: preserve-3d;
  transform-origin: 0% 50%; }
  .carousel.carousel-slider {
    top: 0;
    left: 0; }
    .carousel.carousel-slider .carousel-fixed-item {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 20px;
      z-index: 1; }
      .carousel.carousel-slider .carousel-fixed-item.with-indicators {
        bottom: 68px; }
    .carousel.carousel-slider .carousel-item {
      width: 100%;
      height: 100%;
      min-height: 400px;
      position: absolute;
      top: 0;
      left: 0; }
      .carousel.carousel-slider .carousel-item h2 {
        font-size: 24px;
        font-weight: 500;
        line-height: 32px; }
      .carousel.carousel-slider .carousel-item p {
        font-size: 15px; }
  .carousel .carousel-item {
    visibility: hidden;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0;
    left: 0; }
    .carousel .carousel-item > img {
      width: 100%; }
  .carousel .indicators {
    position: absolute;
    text-align: center;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0; }
    .carousel .indicators .indicator-item {
      display: inline-block;
      position: relative;
      cursor: pointer;
      height: 8px;
      width: 8px;
      margin: 24px 4px;
      background-color: rgba(255, 255, 255, 0.5);
      transition: background-color .3s;
      border-radius: 50%; }
      .carousel .indicators .indicator-item.active {
        background-color: #fff; }
  .carousel.scrolling .carousel-item .materialboxed,
  .carousel .carousel-item:not(.active) .materialboxed {
    pointer-events: none; }

/*custom css*/

.imp-card {
  width: 400px;
  height: 300px;
  display: flex;
  justify-content: center;
}

.image-section {
  width: 200px;
}

.pic-imp-layout {
  width: 100%;
  height: 100%;
}

.text-section {
  width: 200px;
  text-align: right;
  padding-right: 10px;
}
<div class="carousel">
  <a class="carousel-item">
    <div class="imp-card">
      <div class="image-section">
        <img class="pic-imp-layout" src="{% static 'images/img.jpg' %}">
      </div>
      <div class="text-section">
        <p class="score">Score</p>
        <p class="description"><a>&#x201C;</a> lorel ipsum<a>&#8221;</a></p>
        <p class="author">- John</p>
        <div class="like"></div>
        </div>
      </div>
    </div>
  </a>
</div>

materialize css html
1 Answers

found the class that was making the issue, the predetermined height and width of Materializecss class creates the issue, parent custom card and this class should have the same resolution and also can't use anchor tags inside the pre-existing anchor tag of the div, and everything is working normally.

.carousel .carousel-item {
    width: 200px;
    height: 200px;
}
user_189827160
Related