carousel-multi-item problem

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: carousel-multi-item problem

wtj123 pro asked 6 years ago

When using PHP echo command to place some HTML codes, which includes the button or the a elements, into the carousel-multi-item component, the button or the a elements won't work anymore. Can you help me to solve this problem? Thanks!

 

 

 

 

Bartłomiej Malanowski staff pro premium commented 6 years ago

Yes, we can. Could you please share your code with us?

wtj123 pro answered 6 years ago 

Start your code here
(profile.php)
<?php include("loggedInStatus.php"); if (!$loggedInStatus) { header("location: index.php"); } ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>神方電腦城</title> <!-- Font Awesome --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Bootstrap core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Material Design Bootstrap --> <link href="css/mdb.min.css" rel="stylesheet"> <!-- custom styles --> <link href="css/style.css" rel="stylesheet"> </head> <body> <!-- NEW PRODUCTS SECTION --> <section id="new-products" style="margin-top: 100px"> <!--Carousel Wrapper--> <div id="multi-item-example" class="container carousel slide carousel-multi-item" data-ride="carousel"> <h3 class="indigo-text font-weight-bold">新產品</h3> <!--Indicators--> <!-- <ol class="carousel-indicators"> <li data-target="#multi-item-example" data-slide-to="0" class="active"></li> <li data-target="#multi-item-example" data-slide-to="1"></li> <li data-target="#multi-item-example" data-slide-to="2"></li> </ol> --> <!--/.Indicators--> <!--Slides--> <div class="carousel-inner" role="listbox" id="get_newProduct"> </div> <!--/.Slides--> <!--Controls--> <div class="controls-top"> <a class="btn-floating" href="#multi-item-example" data-slide="prev"><i class="fa fa-chevron-left"></i></a> <a class="btn-floating" href="#multi-item-example" data-slide="next"><i class="fa fa-chevron-right"></i></a> </div> <!--/.Controls--> </div> <!--/.Carousel Wrapper--> </section> <!-- NEW PRODUCTS SECTION --> <!-- SCRIPTS --> <!-- JQuery --> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <!-- Bootstrap tooltips --> <script type="text/javascript" src="js/popper.min.js"></script> <!-- Bootstrap core JavaScript --> <script type="text/javascript" src="js/bootstrap.min.js"></script> <!-- MDB core JavaScript --> <!-- main JavaScript --> <script type="text/javascript" src="js/main.js"></script> <script type="text/javascript" src="js/mdb.min.js"></script> </body> </html>   (getNewTopProductAction.php)
function productContent($pro_image, $pro_title, $pro_price, $pro_discount, $cat_title) {
$price = number_format($pro_price);
if ($pro_discount != 0) {
$discountPrice = number_format($pro_price * (100 - $pro_discount) * 0.01);
echo "
<div class='col-md-4'>
       <div class='card mb-2'>
           <img class='card-img-top' src='./img/$pro_image'>
           <div class='card-img-overlay'>
<p class='card-text text-center pull-right discount'><span>-$pro_discount%</span></p>
</div>
           <div class='card-body text-center'>
           <p class='card-text'>$cat_title</p>
<h5 class='card-title'><a class='btn red-text btn-lg font-weight-bold' href='#'>$pro_title</a></h5>
<h5 class='card-title'>$$discountPrice <del class='small blue-text'>$$price</del></h5>
<div class='product-rating'>
<i class='fa fa-star'></i>
<i class='fa fa-star'></i>
<i class='fa fa-star'></i>
<i class='fa fa-star'></i>
<i class='fa fa-star'></i>
</div>
<button class='btn btn-primary'><i class='fa fa-shopping-cart'></i> 放入購物車</button>
           </div>
       </div>
   </div>
   ";
} else {
echo "
<div class='col-md-4'>
       <div class='card mb-2'>
           <img class='card-img-top' src='./img/$pro_image'>
           <div class='card-body text-center'>
           <p class='card-text'>$cat_title</p>
<h5 class='card-title'><a class='btn red-text btn-lg font-weight-bold' href='#'>$pro_title</a></h5>
<h5 class='card-title'>$$price</h5>
<div class='product-rating'>
<i class='fa fa-star'></i>
<i class='fa fa-star'></i>
<i class='fa fa-star'></i>
<i class='fa fa-star'></i>
<i class='fa fa-star'></i>
</div>
<button class='btn btn-primary'><i class='fa fa-shopping-cart'></i> 放入購物車</button>
           </div>
       </div>
   </div>
   ";
}
}
 
// fetch the products records
if(isset($_POST["newProduct"])){
$where = array("product_newest"=>1);
$result = $dataOperation->select_record("products", $where);
if($result->num_rows > 0) {
$num = 1;
while($row_result = $result->fetch_assoc()) {
$pro_id    = $row_result["product_id"];
 $pro_cat   = $row_result["product_cat"];
 $pro_brand = $row_result["product_brand"];
 $pro_title = $row_result["product_title"];
 $pro_price = $row_result["product_price"];
 $pro_image = $row_result["product_image"];
 $pro_discount = $row_result["product_discount"];
 $where1 = array("cat_id"=>$pro_cat);
 $result1 = $dataOperation->select_record("categories", $where1);
 $row_result1 = $result1->fetch_assoc();
 $cat_title = $row_result1["cat_title"];
 if ($num > 3) {
 switch ($num % 3) {
 case '1':
 echo "
 <div class='carousel-item'>
";
productContent($pro_image, $pro_title, $pro_price, $pro_discount, $cat_title);
 break;
  case '2':
 productContent($pro_image, $pro_title, $pro_price, $pro_discount, $cat_title);
 break;
  case '0':
productContent($pro_image, $pro_title, $pro_price, $pro_discount, $cat_title);
echo "
       </div>
       ";
 break;
 default:
 break;
 }
 } else {
 switch ($num % 3) {
 case '1':
 echo "
 <div class='carousel-item active'>
";
productContent($pro_image, $pro_title, $pro_price, $pro_discount, $cat_title);
 break;
  case '2':
 productContent($pro_image, $pro_title, $pro_price, $pro_discount, $cat_title);
 break;
  case '0':
productContent($pro_image, $pro_title, $pro_price, $pro_discount, $cat_title);
echo "
       </div>
       ";
 break;
 default:
 break;
 }
 }
 $num += 1;
   }
}
}

wtj123 pro commented 6 years ago

I found if the is not been added in the card component, the button and the a elements can work perfectly. I don't know why?

wtj123 pro commented 6 years ago

card-img-overlay

Bartłomiej Malanowski staff pro premium commented 6 years ago

could you please show us live demo of this issue?

wtj123 pro answered 6 years ago

I have recorded a live demo file. How can I send the file to you?  
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
wtj123
Pro User
12Support score
1Questions 2Answers
0Snippets likes 0Snippets