iT邦幫忙

0

請問大神們輪播相框的照片網址我是從資料庫輸出的但我的輪播卻無法正常顯示

這是CSS

.carousel {
		position: relative;
		overflow: hidden;
		padding: 2em 0 2em 0;
		margin-bottom: 0;
	}

		.carousel .forward, .carousel .backward {
			position: absolute;
			top: 50%;
			width: 6em;
			height: 12em;
			margin-top: -6em;
			cursor: pointer;
		}

			.carousel .forward:before, .carousel .backward:before {
				content: '';
				display: block;
				width: 6em;
				height: 6em;
				border-radius: 100%;
				background-color: rgba(72, 57, 73, 0.5);
				position: absolute;
				top: 50%;
				margin-top: -3em;
				-moz-transition: background-color 0.35s ease-in-out;
				-webkit-transition: background-color 0.35s ease-in-out;
				-o-transition: background-color 0.35s ease-in-out;
				-ms-transition: background-color 0.35s ease-in-out;
				transition: background-color 0.35s ease-in-out;
				-webkit-backface-visibility: hidden;
			}

			.carousel .forward:after, .carousel .backward:after {
				content: '';
				width: 3em;
				height: 3em;
				position: absolute;
				top: 50%;
				margin: -1.5em 0 0 0;
				background: url("images/arrow.svg") no-repeat center center;
			}

			.carousel .forward:hover:before, .carousel .backward:hover:before {
				background-color: rgba(239, 131, 118, 0.75);
			}

		.carousel .forward {
			right: 0;
		}

			.carousel .forward:before {
				right: -3em;
			}

			.carousel .forward:after {
				right: -0.25em;
			}

		.carousel .backward {
			left: 0;
		}

			.carousel .backward:before {
				left: -3em;
			}

			.carousel .backward:after {
				left: -0.25em;
				-moz-transform: scaleX(-1);
				-webkit-transform: scaleX(-1);
				-ms-transform: scaleX(-1);
				transform: scaleX(-1);
			}

		.carousel .reel {
			white-space: nowrap;
			position: relative;
			-webkit-overflow-scrolling: touch;
			padding: 0 2em 0 2em;
		}

		.carousel article {
			display: inline-block;
			width: 18em;
			background: #fff;
			text-align: center;
			padding: 0 1em 3em 1em;
			margin: 0 2em 0 0;
			white-space: normal;
			opacity: 1.0;
			-moz-transition: opacity 0.75s ease-in-out;
			-webkit-transition: opacity 0.75s ease-in-out;
			-ms-transition: opacity 0.75s ease-in-out;
			transition: opacity 0.75s ease-in-out;
		}

			.carousel article.loading {
				opacity: 0;
			}

			.carousel article .image {
				position: relative;
				left: -1em;
				top: 0;
				width: auto;
				margin-right: -2em;
				margin-bottom: 3em;
			}

			.carousel article p {
				text-align: center;
			}

這是PHP

		       <!-- 照片輪播 -->
			   
				<section class="carousel">
				<div class="reel">
                <article>
			<?php
                if ($result->num_rows > 0) {
             // 輸出數據
             while($row = $result->fetch_assoc()) {
		      ?>
				 <?php
				echo "<a href='#' class='image featured'><img src='網址".$row["path"]."'></a>"; 
					?>
				<header>
				<?php
				echo "<h3><a href='#'>".$row["title"]."</a></h3>"; 
					?>
				</header>
				<?php
				echo "<p>xxxxxxxxxxxxxxx</p>";
				    ?>
				<?php	
                   }
                } else {
               echo "";
               }
               $conn->close();
                ?>
				</article>
				</div>
				</section>

我現在顯示的照片是一排,而不是向右排序高手們可以幫忙解決嗎...

1 個回答

0
kksugsay
iT邦新手 1 級 ‧ 2018-07-02 09:06:02

例如下列作法:
html

<!DOCTYPE html>
<html>
   <head>
      <meta charset=utf-8 />
      <title>JS Bin</title>
   </head>
   <body>
      <!-- 照片輪播 -->
      <section class="carousel">
         <div class="reel">
         <article>
            <div class="ad-layout">
               <a href='#' class='image featured'>
               <img src='https://goo.gl/52Sdyg' width="100"></a>
               <header>
                  <h3><a href='#'>ttttt</a></h3>
               </header>
               <p>xxxxxxxxxxxxxxx</p>
            </div>
            <div class="ad-layout">
            <a href='#' class='image featured'>
            <img src='https://goo.gl/52Sdyg' width="100"></a>
            <header>
               <h3><a href='#'>ttttt</a></h3>
            </header>
            <p>xxxxxxxxxxxxxxx</p>
            <div>
         </article>
         </div>
      </section>
   </body>
</html>

css

.ad-layout{
  float:left;
}

我要發表回答

立即登入回答