iT邦幫忙

0

滑動table怎麼把點移上去

  • 分享至 

  • xImage

大家好,上次友邦有介紹可滑動table,我試著寫一個
參考:https://codepen.io/frise/pen/kXRQGx
但我想把點移到上面卻不知道哪裡可以移
還有我在範例上看,他左右鍵是消失的,但移到我的頁面,左右鍵又出現了....
我已經prevNextButtons: false,
https://ithelp.ithome.com.tw/upload/images/20210315/20102983jlwWN0I3xc.png

<!DOCTYPE html>
<html lang="en">
<head> 
	<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/i18n/jquery.ui.datepicker-zh-TW.min.js"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/dmuy/MDTimePicker/mdtimepicker.css">
	<script src="https://cdn.jsdelivr.net/gh/dmuy/MDTimePicker/mdtimepicker.js"></script>	
  <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
  	<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
 	  
	<script>
  var elem = document.querySelector('.carousel');
var flkty = new Flickity( elem, {
  // options
  freeScroll: false,
  contain: true,
  prevNextButtons: false,
  groupCells: true,
  cellAlign: 'left'
});
</script>
</head>
<style>
 

/*table */
.table-head {
  float: left;
  width: 80px;
  border-right: 2px solid #333;
  border-collapse: collapse
}

.table-scroll {
  float: left;
  width: calc(100% - 81px);
  border-top: 1px solid #333;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
  //background-color: #AAA;
}

.table-scroll table {
 // margin-top: -1px;
 // width: 30%;
//  min-width: 300px;
 // max-width: 40%;
  border-collapse: collapse;
}

th {
  text-align: left;
  background-color: #f2f2f2;
  color: #0076BF;
}

th, td {
  padding: 10px;
  border: 1px solid #333;
  background-clip: padding-box;
}

td {
  background-color: #fff;
} 
		</style>
<body> 
 
	 
<div class="table-scroll carousel"  data-flickity="" data-js="carousel">
 
  <table class="carousel-cell">
    <th>Title3</th>
    <tr>
      <td>31</td>
    </tr>
    <tr>
      <td>32</td>
    </tr>
    <tr>
      <td>33</td>
    </tr>
    <tr>
      <td>34</td>
    </tr>
  </table>
  <table class="carousel-cell">
    <th>Title4</th>
    <tr>
      <td>41</td>
    </tr>
    <tr>
      <td>42</td>
    </tr>
    <tr>
      <td>43</td>
    </tr>
    <tr>
      <td>44</td>
    </tr>
  </table>
</div>
  
</body>
</html>

謝謝大家

archer9080 iT邦研究生 3 級 ‧ 2021-03-15 17:11:44 檢舉
>cellAlign: 'left'
但你的還在中間
檢查一下你的js
基本上option應該都沒起做用
附上參數說明
https://github.com/metafizzy/flickity
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

4
純真的人
iT邦大師 1 級 ‧ 2021-03-15 15:43:33
最佳解答

我看F12直接改的~你參考看看
另外加上強制隱藏左右~

.table-head{margin-top:25px}
.table-scroll{margin-top:25px}
.flickity-page-dots{top:-25px}
.flickity-prev-next-button{display:none;}

https://ithelp.ithome.com.tw/upload/images/20210315/20061369ocITobJ7vB.png

F12下的畫面HTML檢查
https://ithelp.ithome.com.tw/upload/images/20210315/20061369Zw01gzhSMT.png

神威 iT邦研究生 4 級 ‧ 2021-03-15 16:31:19 檢舉

純真的人好:謝謝您的回達,不過我加入.flickity-page-dots{top:-25px}就不能手動滑動了,只能按點點來移動左右...

那是因為.flickity-page-dots裡面有設定position: absolute;相對高度~蓋住下面的關係~
https://ithelp.ithome.com.tw/upload/images/20210315/20061369fGZM79Fz34.png

https://ithelp.ithome.com.tw/upload/images/20210315/20061369WOQz51po4R.png

所以加上高度設定~就可以滑動了~

.table-head{margin-top:25px;}
.table-scroll{margin-top:25px;}
.flickity-page-dots{top:-25px;height:30px}
.flickity-prev-next-button{display:none;}
神威 iT邦研究生 4 級 ‧ 2021-03-15 17:00:16 檢舉

謝謝

1
Homura
iT邦高手 1 級 ‧ 2021-03-15 15:00:18

我好像沒看到設定能調位置
研究一下加上這段會變在上面

.flickity-page-dots{
  top:-25px;
}
神威 iT邦研究生 4 級 ‧ 2021-03-15 17:01:13 檢舉

謝謝大大的解答,不過純真的人說的比較詳細,最佳解就給他了

我要發表回答

立即登入回答